:root {
    color-scheme: dark;

    /* Approved Soft Graphite foundation. */
    --color-background: #1b1f24;
    --color-sidebar: #15191e;
    --color-surface: #242a31;
    --color-surface-raised: #2b323a;
    --color-surface-subtle: #20262d;
    --color-text: #f4f6f8;
    --color-muted: #c1c9d2;
    --color-border: #46515e;
    --color-control-border: #64748b;

    /* Text links and filled actions need different cobalt values. */
    --color-link: #60a5fa;
    --color-link-hover: #93c5fd;
    --color-action: #2563eb;
    --color-action-hover: #1d4ed8;
    --color-on-action: #f8fafc;
    --color-action-soft: #203553;
    --color-action-border: #3b82f6;
    --color-focus: #75b5ff;
    --color-focus-soft: rgba(117, 181, 255, 0.24);

    /* Database-backed status semantics. */
    --color-success: #4ade80;
    --color-success-soft: #173c2a;
    --color-running: #60a5fa;
    --color-running-soft: #1c3554;
    --color-danger: #fb7185;
    --color-danger-soft: #47252d;
    --color-warning: #fbbf24;
    --color-warning-soft: #463718;
    --color-disabled: #a8b3c0;
    --color-disabled-soft: #303740;

    /* Compatibility aliases while existing pages migrate. */
    --color-primary: var(--color-link);
    --color-primary-strong: var(--color-link-hover);
    --color-primary-soft: var(--color-action-soft);

    --radius-small: 0.375rem;
    --radius-control: 0.5rem;
    --radius-panel: 0.625rem;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
    --sidebar-width: 13.25rem;
    --content-width: 88rem;

    /* Centralized application typography contract. */
    --font-ui:
        "Segoe UI Variable",
        "Segoe UI",
        "Noto Sans JP",
        "Yu Gothic UI",
        "Yu Gothic",
        Meiryo,
        system-ui,
        sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
    --text-page-title: clamp(1.75rem, 2.5vw, 2.25rem);
    --text-section-title: 1rem;
    --text-body: 0.9375rem;
    --text-ui: 0.875rem;
    --text-table: 0.8125rem;
    --text-caption: 0.75rem;
    --leading-title: 1.2;
    --leading-heading: 1.3;
    --leading-body: 1.55;
    --leading-ui: 1.4;
    --leading-caption: 1.45;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --tracking-normal: normal;
    --tracking-compact-label: 0.01em;
}

/* Compact operational dashboard based on the approved ABAP reference. */
.dashboard-page { display: grid; gap: .7rem; }
.dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin-bottom: .1rem; }
.dashboard-heading .section-title { margin: .1rem 0 0; font-size: clamp(1.55rem, 2vw, 1.9rem); line-height: 1.15; }
.dashboard-subtitle { margin: .25rem 0 0; color: var(--color-muted); font-size: .8rem; }
.dashboard-primary-action { min-height: 2.65rem; flex: 0 0 auto; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.metric-card { min-height: 6.35rem; display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: flex-end; gap: .7rem; padding: .85rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.metric-card > div { min-width: 0; flex: 1 1 auto; }
.metric-card p { margin: 0 0 .45rem; color: var(--color-muted); font-size: .76rem; font-weight: 600; line-height: 1.35; }
.metric-card strong { display: block; font-size: 1.35rem; line-height: 1; }
.metric-card div > span { display: block; margin-top: .5rem; color: var(--color-muted); font-size: .67rem; line-height: 1.35; }
.metric-icon { width: 2.05rem; height: 2.05rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: .5rem; }
.metric-icon .ui-icon { width: 1.05rem; height: 1.05rem; }
.metric-card--blue .metric-icon { background: #1e3a5f; color: #60a5fa; }
.metric-card--green .metric-icon { background: #123c35; color: #34d399; }
.metric-card--purple .metric-icon { background: #39285c; color: #c084fc; }
.metric-card--red .metric-icon { background: #4a2832; color: #fb7185; }
.dashboard-grid { display: grid; gap: .55rem; align-items: stretch; }
.dashboard-grid--primary { grid-template-columns: minmax(0, 1.75fr) minmax(17rem, 1fr) minmax(14rem, .75fr); }
.dashboard-grid--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(17rem, .95fr); }
.dashboard-panel { min-width: 0; padding: .8rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .65rem; }
.panel-heading h2 { margin: 0; font-size: .86rem; line-height: 1.35; }
.panel-heading p { margin: .15rem 0 0; color: var(--color-muted); font-size: .67rem; line-height: 1.4; }
.panel-heading > a { flex: 0 0 auto; font-size: .7rem; font-weight: 600; }
.dashboard-table { border: 0; border-radius: 0; }
.dashboard-table table { min-width: 34rem; font-size: .7rem; }
.dashboard-table th, .dashboard-table td { padding: .45rem .42rem; }
.dashboard-table time { white-space: nowrap; }
.dashboard-empty { min-height: 8.5rem; display: grid; align-content: center; justify-items: center; gap: .25rem; padding: .8rem; color: var(--color-muted); text-align: center; }
.dashboard-empty > .ui-icon { width: 1.6rem; height: 1.6rem; margin-bottom: .2rem; }
.dashboard-empty strong { color: var(--color-text); font-size: .76rem; }
.dashboard-empty span { max-width: 25rem; font-size: .67rem; }
.dashboard-empty--compact { min-height: 6.5rem; }
.permission-message { min-height: 6.5rem; display: grid; place-items: center; margin: 0; color: var(--color-muted); font-size: .72rem; text-align: center; }
.department-list, .compact-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.department-list li > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; }
.department-bar { width: 100%; height: .35rem; display: block; margin-top: .35rem; overflow: hidden; appearance: none; background: var(--color-surface-subtle); border: 0; border-radius: 999px; }
.department-bar::-webkit-progress-bar { background: var(--color-surface-subtle); border-radius: inherit; }
.department-bar::-webkit-progress-value { background: var(--color-action-border); border-radius: inherit; }
.department-bar::-moz-progress-bar { background: var(--color-action-border); border-radius: inherit; }
.quick-actions nav { display: grid; gap: .35rem; }
.quick-actions nav a { min-height: 2.7rem; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) .9rem; align-items: center; gap: .55rem; padding: .55rem .65rem; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-control); text-decoration: none; font-size: .72rem; }
.quick-actions nav a:hover { background: var(--color-action-soft); border-color: var(--color-action-border); }
.quick-actions .ui-icon { width: 1rem; height: 1rem; color: var(--color-link); }
.compact-list li { display: flex; align-items: flex-start; gap: .55rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); font-size: .7rem; }
.compact-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.compact-list li > span:last-child { min-width: 0; display: grid; gap: .1rem; }
.compact-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-list small { color: var(--color-muted); }
.activity-list .ui-icon { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .15rem; color: var(--color-muted); }
.activity-list li > span { overflow-wrap: anywhere; line-height: 1.4; }
.activity-summary { color: var(--color-text); }
.activity-list time { white-space: nowrap; }
.dashboard-stack { display: grid; gap: .55rem; }
.readiness-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .65rem; background: var(--color-surface-subtle); border-radius: var(--radius-control); font-size: .72rem; }
.readiness-status > .ui-icon { width: 1.2rem; height: 1.2rem; color: var(--color-link); }
.readiness-status > span:nth-child(2) { display: grid; }
.readiness-status small { color: var(--color-muted); }
.readiness-dot { width: .55rem; height: .55rem; background: var(--color-danger); border-radius: 50%; box-shadow: 0 0 0 .22rem var(--color-danger-soft); }
.readiness-dot.is-ready { background: var(--color-success); box-shadow: 0 0 0 .22rem var(--color-success-soft); }

.business-snapshot { padding-bottom: .8rem; }
.business-snapshot .panel-heading { margin-bottom: .5rem; }
.business-snapshot > .business-metric-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.business-snapshot > .business-metric-strip > .business-metric { min-width: 0; padding: .6rem .7rem; border-inline-start: 1px solid var(--color-border); }
.business-snapshot > .business-metric-strip > .business-metric:first-child { border-inline-start: 0; }
.business-snapshot .business-metric dt { color: var(--color-muted); font-size: .68rem; line-height: 1.35; }
.business-snapshot .business-metric dd { display: grid; gap: .2rem; margin: .28rem 0 0; }
.business-snapshot .business-metric dd > strong { display: block; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.15; }
.business-snapshot .business-metric dd > span { display: block; color: var(--color-muted); font-size: .63rem; line-height: 1.35; }

@media (max-width: 1180px) {
    .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-panel--wide { grid-column: 1 / -1; }
    .dashboard-grid--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-snapshot > .business-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-snapshot > .business-metric-strip > .business-metric { border-block-start: 1px solid var(--color-border); }
    .business-snapshot > .business-metric-strip > .business-metric:nth-child(-n + 2) { border-block-start: 0; }
    .business-snapshot > .business-metric-strip > .business-metric:nth-child(odd) { border-inline-start: 0; }
    .business-snapshot > .business-metric-strip > .business-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .dashboard-heading { align-items: stretch; flex-direction: column; }
    .dashboard-primary-action { justify-content: center; }
    .dashboard-grid--primary, .dashboard-grid--secondary, .dashboard-stack { grid-template-columns: 1fr; }
    .dashboard-panel--wide, .dashboard-stack { grid-column: auto; }
}

@media (max-width: 480px) {
    .dashboard-metrics, .business-snapshot > .business-metric-strip { grid-template-columns: 1fr; }
    .business-snapshot > .business-metric-strip > .business-metric { border-block-start: 1px solid var(--color-border); border-inline-start: 0; }
    .business-snapshot > .business-metric-strip > .business-metric:first-child { border-block-start: 0; }
    .business-snapshot > .business-metric-strip > .business-metric:last-child:nth-child(odd) { grid-column: auto; }
}

:root[data-theme="light"] {
    color-scheme: light;
    --color-background: #edf1f4;
    --color-sidebar: #e5eaef;
    --color-surface: #ffffff;
    --color-surface-raised: #f6f8fa;
    --color-surface-subtle: #f0f3f6;
    --color-text: #182332;
    --color-muted: #586779;
    --color-border: #c5ced8;
    --color-control-border: #718096;
    --color-link: #1f5ea8;
    --color-link-hover: #174a86;
    --color-action: #2463b5;
    --color-action-hover: #1d4f91;
    --color-on-action: #ffffff;
    --color-action-soft: #dfeaf6;
    --color-action-border: #2e6fbd;
    --color-focus: #1f66bd;
    --color-focus-soft: rgba(31, 102, 189, 0.22);
    --color-success: #15803d;
    --color-success-soft: #dcfce7;
    --color-running: #1d4ed8;
    --color-running-soft: #dbeafe;
    --color-danger: #be123c;
    --color-danger-soft: #ffe4e6;
    --color-warning: #a16207;
    --color-warning-soft: #fef3c7;
    --color-disabled: #64748b;
    --color-disabled-soft: #e2e8f0;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.07);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-body);
    font-synthesis: none;
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
}

:lang(ja) {
    letter-spacing: var(--tracking-normal);
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

button,
input,
select,
textarea {
    font: inherit;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.58;
}

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    transform: translateY(-180%);
    background: var(--color-text);
    color: var(--color-background);
    border-radius: 0.5rem;
    font-weight: 700;
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.application-shell {
    min-height: 100vh;
    background: var(--color-background);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    padding: 1.1rem 0.75rem 0.9rem;
    overflow: hidden;
    background: var(--color-sidebar);
    border-right: 1px solid var(--color-border);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 5.5rem;
    padding: 0 0.45rem 1rem;
}

.brand {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
    text-decoration: none;
}

.brand-lockup {
    display: block;
    width: min(100%, 9.5rem);
    height: auto;
}

.brand-tagline {
    color: var(--color-muted);
    font-size: 0.61rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.sidebar-close-button {
    display: none;
}

.sidebar > nav {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    gap: 1.15rem;
    padding-right: 0.2rem;
    overflow-y: auto;
    scrollbar-color: var(--color-border) transparent;
    scrollbar-width: thin;
}

.navigation-section {
    min-width: 0;
}

.navigation-heading,
.topbar-title,
.section-eyebrow {
    margin: 0;
}

.navigation-heading {
    padding: 0 0.65rem 0.45rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

.navigation-list {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation-link {
    display: flex;
    min-height: 2.625rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    color: var(--color-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.navigation-link:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

.navigation-link.is-active {
    position: relative;
    background: var(--color-primary-soft);
    color: var(--color-text);
    border-color: transparent;
}

.navigation-link.is-active::before {
    position: absolute;
    inset: 0.45rem auto 0.45rem 0;
    width: 0.2rem;
    background: var(--color-action-border);
    border-radius: 999px;
    content: "";
}

.navigation-icon {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    color: var(--color-primary);
    font-weight: 700;
}

.navigation-icon .ui-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: auto;
    padding: 0.85rem 0.35rem 0;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    flex: 0 0 auto;
}

.theme-toggle,
.logout-button {
    width: 100%;
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    background: transparent;
    color: var(--color-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.theme-toggle:hover,
.logout-button:hover {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.language-selector {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    gap: 0.4rem;
    justify-content: start;
}

.language-selector select,
.language-selector button {
    min-height: 2.35rem;
    padding: 0.4rem 0.55rem;
    background: var(--color-surface-subtle);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    font: inherit;
}

.language-selector.is-enhanced button {
    display: none;
}

.language-selector button {
    color: var(--color-link);
    font-weight: 700;
    cursor: pointer;
}

.sidebar-footer [data-language-selector] {
    margin-inline-start: 0.65rem;
}

.sidebar-footer [data-language-selector] select,
.sidebar-footer [data-language-selector] button {
    min-height: 1.875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.account-summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
}

.account-avatar {
    width: 2rem;
    height: 2rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    background: var(--color-action-soft);
    color: var(--color-link);
    border: 1px solid var(--color-action-border);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.account-details {
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.account-details strong,
.account-details span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-details strong {
    color: var(--color-text);
    font-size: 0.82rem;
}

.account-details span {
    font-size: 0.75rem;
}

.logout-form {
    margin: 0;
}

.status-dot {
    width: 0.65rem;
    height: 0.65rem;
    background: var(--color-primary);
    border-radius: 50%;
}

.application-main {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: none;
    min-height: 5rem;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 2rem;
    background: var(--color-background);
    background: color-mix(
        in srgb,
        var(--color-background) 96%,
        transparent
    );
    border-bottom: 1px solid var(--color-border);
}

.topbar-title {
    min-width: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-button {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    cursor: pointer;
    padding: 0;
}

.menu-button-lines,
.menu-button-lines::before,
.menu-button-lines::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    content: "";
}

.menu-button-lines {
    position: relative;
}

.menu-button-lines::before {
    position: absolute;
    top: -0.35rem;
}

.menu-button-lines::after {
    position: absolute;
    top: 0.35rem;
}

.mobile-brand {
    display: none;
}

.theme-toggle--compact {
    width: 2.75rem;
    min-height: 2.75rem;
    flex: 0 0 auto;
    justify-content: center;
    margin-left: auto;
    padding: 0;
}

.page-content {
    width: min(
        calc(100% - 3rem),
        var(--content-width)
    );
    margin: 0 auto;
    padding: 2rem 0 3rem;
}

.welcome-card,
.resource-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.welcome-card {
    max-width: 760px;
    padding: 2.25rem;
}

.section-eyebrow {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.section-title {
    margin: 0.4rem 0 0.75rem;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
}

.page-message {
    max-width: 58ch;
    margin: 0 0 1.5rem;
    color: var(--color-muted);
    font-size: 1.125rem;
}

.status-message {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-text);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.status-indicator {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    background: var(--color-action);
    color: var(--color-on-action);
    border-radius: 50%;
    font-size: 0.75rem;
}

.dashboard-hero,
.dashboard-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.dashboard-hero {
    padding: 2.25rem;
}

.dashboard-section {
    margin-top: 1.5rem;
    padding: 2rem;
}

.dashboard-section-title {
    margin: 0.35rem 0 0;
    font-size: 1.35rem;
}

.dashboard-section-description {
    max-width: 68ch;
    margin: 0.65rem 0 0;
    color: var(--color-muted);
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 15rem), 1fr)
    );
    gap: 1rem;
}

.module-card {
    display: flex;
    min-width: 0;
    min-height: 15rem;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
}

.module-card.is-available {
    border-color: var(--color-primary-strong);
}

.module-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.module-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: 0.65rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.module-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.module-status.is-available {
    background: var(--color-primary-soft);
    color: var(--color-text);
    border-color: var(--color-action-border);
}

.module-card h3 {
    margin: 1.25rem 0 0.6rem;
    font-size: 1.1rem;
}

.module-card p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.module-action {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.module-action:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.resource-section {
    margin-top: 1.5rem;
    padding: 2rem;
}

.section-heading-group {
    margin-bottom: 1.25rem;
}

.resource-title {
    margin: 0.35rem 0 0;
    font-size: 1.35rem;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.resource-card {
    display: flex;
    min-height: 6rem;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    text-decoration: none;
}

.resource-card:hover {
    border-color: var(--color-primary-strong);
}

.resource-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: 0.65rem;
    font-weight: 700;
}

.resource-card strong,
.resource-card small {
    display: block;
}

.resource-card small {
    margin-top: 0.2rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.navigation-backdrop {
    display: none;
}

@media (max-width: 760px) {
    .sidebar {
        width: min(86vw, var(--sidebar-width));
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    .sidebar-header {
        justify-content: space-between;
    }

    .sidebar-close-button {
        width: 2.5rem;
        height: 2.5rem;
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        background: transparent;
        color: var(--color-muted);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-control);
        cursor: pointer;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .navigation-backdrop {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: block;
        visibility: hidden;
        background: rgba(0, 0, 0, 0.58);
        border: 0;
        opacity: 0;
        transition:
            opacity 180ms ease,
            visibility 180ms ease;
    }

    .navigation-open .navigation-backdrop {
        visibility: visible;
        opacity: 1;
    }

    .navigation-open {
        overflow: hidden;
    }

    .application-main {
        margin-left: 0;
    }

    .menu-button {
        display: grid;
    }

    .topbar {
        display: flex;
        min-height: 4.5rem;
        padding: 0.75rem 1rem;
    }

    .mobile-brand {
        display: block;
        height: 1.9rem;
    }

    .mobile-brand img {
        display: block;
        width: 2.3rem;
        height: 1.9rem;
    }

    .page-content {
        width: min(
            calc(100% - 2rem),
            var(--content-width)
        );
        padding: 1.5rem 0;
    }

    .welcome-card,
    .resource-section {
        padding: 1.5rem;
        border-radius: 0.8rem;
    }

    .dashboard-hero,
    .dashboard-section {
        padding: 1.5rem;
        border-radius: 0.8rem;
    }

    .resource-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.authentication-page {
    background: var(--color-background);
}

.authentication-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.authentication-card {
    width: min(100%, 30rem);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.authentication-brand {
    display: grid;
    justify-items: start;
    gap: 0.15rem;
    padding: 1.5rem;
    background: var(--color-sidebar);
    border-bottom: 1px solid var(--color-border);
}

.authentication-brand-description {
    margin: 0;
}

/* Workflow and Agent Template directories. */
.directory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.status-filter-form { display: flex; align-items: center; gap: .6rem; }
.status-filter-form label { color: var(--color-muted); font-size: .78rem; font-weight: 600; }
.status-filter-form select { min-width: 10rem; min-height: 2.5rem; padding: .45rem 2rem .45rem .7rem; background: var(--color-surface-subtle); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.result-count { margin: 0; color: var(--color-muted); font-size: .8rem; }
.result-count strong { color: var(--color-text); }
.workflow-table-wrapper { border: 0; border-radius: 0; }
.workflow-table { width: 100%; min-width: 64rem; border-collapse: collapse; }
.workflow-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.workflow-table th, .workflow-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; font-size: .78rem; }
.workflow-table thead th { background: var(--color-surface-subtle); color: var(--color-muted); font-size: .68rem; letter-spacing: normal; text-transform: none; }
.workflow-table tbody tr:hover { background: color-mix(in srgb, var(--color-action-soft) 32%, transparent); }
.workflow-table tbody tr:last-child > * { border-bottom: 0; }
.workflow-identity { display: flex; align-items: center; gap: .65rem; color: var(--color-text); text-decoration: none; }
.workflow-symbol { width: 2rem; height: 2rem; display: grid; flex: 0 0 auto; place-items: center; background: #1e3a5f; color: #60a5fa; border-radius: .5rem; }
.workflow-symbol .ui-icon { width: 1rem; height: 1rem; }
.workflow-identity > span:last-child { min-width: 0; display: grid; gap: .05rem; }
.workflow-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-identity small { color: var(--color-muted); font-weight: 500; }
.workflow-description { max-width: 22rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-empty-state, .agent-empty-state { min-height: 19rem; display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.workflow-empty-state > .ui-icon, .agent-empty-state > .ui-icon { width: 2.2rem; height: 2.2rem; color: var(--color-link); }
.workflow-empty-state h2, .agent-empty-state h2 { margin: 0; font-size: 1rem; }
.workflow-empty-state p, .agent-empty-state p { margin: .25rem 0 0; color: var(--color-muted); }
.agent-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.agent-card { min-width: 0; min-height: 15rem; display: flex; flex-direction: column; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); transition: border-color 150ms ease, transform 150ms ease; }
.agent-card:hover { border-color: var(--color-action-border); transform: translateY(-1px); }
.agent-card > header, .agent-card > footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.agent-model-chip { max-width: 11rem; overflow: hidden; padding: .2rem .45rem; background: var(--color-action-soft); color: var(--color-link); border: 1px solid var(--color-action-border); border-radius: .35rem; font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.agent-card-content { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .75rem; margin: 1.15rem 0; }
.agent-card-icon { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; background: #39285c; color: #c084fc; border-radius: .55rem; }
.agent-card-icon .ui-icon { width: 1.15rem; height: 1.15rem; }
.agent-card h2 { margin: 0; font-size: 1rem; }
.agent-card h2 a { color: var(--color-text); text-decoration: none; }
.agent-card h2 a::after { position: absolute; inset: 0; content: ''; }
.agent-card { position: relative; }
.agent-card p { display: -webkit-box; margin: .4rem 0 0; overflow: hidden; color: var(--color-muted); font-size: .78rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.agent-card > footer { margin-top: auto; padding-top: .8rem; color: var(--color-muted); border-top: 1px solid var(--color-border); font-size: .68rem; }
.agent-card > footer span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) { .agent-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
    .directory-toolbar, .status-filter-form { align-items: stretch; flex-direction: column; }
    .status-filter-form select, .status-filter-form .ui-button { width: 100%; }
    .result-count { align-self: flex-start; }
    .agent-card-grid { grid-template-columns: 1fr; }
}

.authentication-brand-wordmark {
    display: block;
    width: 9rem;
    height: auto;
}

.authentication-brand-description {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.authentication-introduction,
.authentication-form,
.authentication-footer {
    padding-right: 2rem;
    padding-left: 2rem;
}

.authentication-introduction {
    padding-top: 2rem;
}

.authentication-title {
    margin: 0;
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    line-height: 1.2;
}

.authentication-description {
    margin: 0.75rem 0 0;
    color: var(--color-muted);
}

.authentication-form {
    display: grid;
    gap: 1.25rem;
    padding-top: 1.5rem;
}

.form-field {
    display: grid;
    gap: 0.5rem;
}

.form-field label {
    font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
    background: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    font: inherit;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
    border-color: var(--color-muted);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-focus);
    box-shadow: none;
}

.primary-button {
    min-height: 3rem;
    padding: 0.75rem 1rem;
    background: var(--color-action);
    color: var(--color-on-action);
    border: 0;
    border-radius: 0.65rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.primary-button:hover {
    background: var(--color-action-hover);
}

.form-message {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 1.5rem 2rem 0;
    padding: 0.875rem 1rem;
    border: 1px solid;
    border-radius: 0.65rem;
    font-weight: 700;
}

.form-message-error {
    background: #472428;
    color: #ffe4e6;
    border-color: #fda4af;
}

.authentication-footer {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.authentication-footer p {
    margin: 0;
}

.language-selector--login {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    align-items: end;
    margin-bottom: 1rem;
}

.language-selector--login label {
    grid-column: 1 / -1;
    color: var(--color-text);
    font-weight: 600;
}

@media (max-width: 480px) {
    .authentication-shell {
        padding: 0;
    }

    .authentication-card {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .authentication-introduction,
    .authentication-form,
    .authentication-footer {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

.directory-section {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.directory-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.directory-count {
    flex-shrink: 0;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.directory-count strong {
    margin-right: 0.2rem;
}

.directory-filter-form {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.directory-filter-fields {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
}

.directory-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.directory-filter-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    background: var(--color-action);
    color: var(--color-on-action);
    border: 1px solid var(--color-action);
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.directory-filter-button:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.directory-clear-filters-link {
    color: var(--color-muted);
    font-weight: 700;
}

.directory-clear-filters-link:hover {
    color: var(--color-text);
}

.employee-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.employee-table {
    width: 100%;
    min-width: 47rem;
    border-collapse: collapse;
    background: var(--color-background);
}

.employee-table caption {
    padding: 1rem;
    color: var(--color-muted);
    text-align: left;
    font-size: 0.875rem;
}

.employee-table th,
.employee-table td {
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.employee-table thead th {
    background: var(--color-surface-raised);
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
}

.employee-table tbody th {
    color: var(--color-text);
}

.employee-table tbody tr:hover {
    background: var(--color-surface);
}

.employee-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.directory-message,
.directory-empty-state {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.directory-message {
    margin: 0;
}

.directory-message-error {
    background: #442326;
    color: #ffd7d9;
    border-color: #8f454b;
}

.directory-empty-state {
    background: var(--color-background);
}

.directory-empty-state h2,
.directory-empty-state p {
    margin: 0;
}

.directory-empty-state p {
    color: var(--color-muted);
}

.directory-empty-icon {
    color: var(--color-primary);
    font-size: 2rem;
}

@media (max-width: 640px) {
    .directory-heading {
        flex-direction: column;
    }

    .directory-count {
        align-self: flex-start;
    }

    .directory-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .directory-filter-button,
    .directory-clear-filters-link {
        width: 100%;
        text-align: center;
    }

    .directory-clear-filters-link {
        padding: 0.75rem;
    }
}

.employee-profile-link {
    color: var(--color-primary);
    text-decoration-thickness: 0.1rem;
    text-underline-offset: 0.2rem;
}

.employee-profile-link:hover {
    color: var(--color-text);
}

.profile-section {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.back-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.back-link:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.profile-identifier {
    margin: 0.75rem 0 0;
    color: var(--color-muted);
}

.profile-status {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.profile-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.profile-card {
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.profile-card h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.profile-details {
    margin: 0;
}

.profile-details div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.75fr) 1fr;
    gap: 1rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--color-border);
}

.profile-details dt {
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.profile-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.profile-error {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #442326;
    color: #ffd7d9;
    border: 1px solid #8f454b;
    border-radius: 0.75rem;
}

.profile-error-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-weight: 700;
}

.profile-error-title,
.profile-error p {
    margin: 0;
}

.profile-error p {
    margin-top: 0.4rem;
}

@media (max-width: 640px) {
    .profile-header {
        flex-direction: column;
    }

    .profile-status {
        align-self: flex-start;
    }

    .profile-details div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: -0.75rem 0 1.5rem;
}

.payroll-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    background: var(--color-action);
    color: var(--color-on-action);
    border: 1px solid var(--color-action);
    border-radius: 0.55rem;
    font-weight: 600;
    text-decoration: none;
}

.payroll-link:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.payroll-section {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.payroll-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.payroll-access-status {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.payroll-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1rem;
}

.payroll-card {
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.payroll-card h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.payroll-performance-card {
    grid-column: 1 / -1;
}

.payroll-details {
    margin: 0;
}

.payroll-details div {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto;
    gap: 1rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--color-border);
}

.payroll-details dt {
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.payroll-details dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.payroll-total-row {
    color: var(--color-primary);
    font-weight: 700;
}

.payroll-note {
    margin: 1rem 0 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

@media (max-width: 640px) {
    .profile-actions {
        justify-content: stretch;
    }

    .payroll-link {
        width: 100%;
    }

    .payroll-header {
        flex-direction: column;
    }

    .payroll-access-status {
        align-self: flex-start;
    }

    .payroll-details div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .payroll-details dd {
        text-align: left;
    }
}

.directory-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.add-employee-link,
.employee-submit-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    background: var(--color-action);
    color: var(--color-on-action);
    border: 1px solid var(--color-action);
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.add-employee-link:hover,
.employee-submit-button:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.employee-form-section {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.employee-form-section .back-link {
    display: inline-flex;
    width: auto;
    height: auto;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 0;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.employee-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.form-access-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.employee-form {
    display: grid;
    gap: 1rem;
}

.employee-form-card {
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.employee-form-card h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.employee-form-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}

.employee-form-grid + .form-field {
    margin-top: 0.5rem;
}

.form-field {
    display: grid;
    gap: 0.45rem;
}

.form-field label {
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.form-help {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.agent-template-prompt {
    margin: 1rem 0 0;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-family:
        Consolas,
        "Courier New",
        monospace;
    font-size: 0.9rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.form-field .checkbox-label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
}

.form-field .checkbox-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--color-primary);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    background: var(--color-surface-raised);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    font: inherit;
}

.form-field select {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f0e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-primary);
}

.workforce-report-section {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.workforce-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.workforce-report-description {
    margin: 0.65rem 0 0;
    color: var(--color-muted);
}

.workforce-report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.workforce-report-status {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.report-export-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    background: var(--color-action);
    color: var(--color-on-action);
    border: 1px solid var(--color-action);
    border-radius: 0.55rem;
    font-weight: 600;
    text-decoration: none;
}

.report-export-link:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.workforce-metric-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.workforce-metric-card,
.workforce-department-card,
.workforce-empty-state {
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.workforce-metric-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.workforce-metric-card strong {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-primary);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.workforce-department-card h2,
.workforce-empty-state h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.workforce-table th:last-child,
.workforce-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.workforce-empty-state p {
    margin: 0;
    color: var(--color-muted);
}

@media (max-width: 640px) {
    .workforce-report-header {
        flex-direction: column;
    }

    .workforce-report-status {
        align-self: flex-start;
    }

    .workforce-report-actions {
        width: 100%;
        align-items: stretch;
    }

    .report-export-link {
        width: 100%;
    }
}

.employee-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.form-cancel-link {
    color: var(--color-muted);
    font-weight: 700;
}

.form-cancel-link:hover {
    color: var(--color-text);
}

@media (max-width: 640px) {
    .directory-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .add-employee-link {
        width: 100%;
    }

    .employee-form-heading {
        flex-direction: column;
    }

    .form-access-badge {
        align-self: flex-start;
    }

    .employee-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .employee-submit-button {
        width: 100%;
    }

    .form-cancel-link {
        padding: 0.75rem;
        text-align: center;
    }
}

.edit-employee-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 0.55rem;
    font-weight: 600;
    text-decoration: none;
}

.edit-employee-link:hover {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

.delete-employee-link,
.employee-delete-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    background: transparent;
    color: #ffd7d9;
    border: 1px solid #8f454b;
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
}

.employee-delete-button {
    background: #8f454b;
    color: #ffffff;
    cursor: pointer;
}

.delete-employee-link:hover {
    background: #442326;
    color: #ffffff;
}

.employee-delete-button:hover {
    background: #a95058;
    border-color: #a95058;
}

.employee-edit-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.employee-edit-summary p {
    margin: 0;
}

.employee-edit-summary p:last-child {
    color: var(--color-muted);
}

@media (max-width: 640px) {
    .profile-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .edit-employee-link,
    .delete-employee-link,
    .employee-delete-button {
        width: 100%;
    }

    .employee-edit-summary {
        flex-direction: column;
    }
}

.activity-log-section {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.activity-log-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.activity-log-description {
    margin: 0.65rem 0 0;
    color: var(--color-muted);
}

.activity-log-status {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.activity-log-card,
.activity-log-empty-state {
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.activity-log-card h2,
.activity-log-empty-state h2 {
    margin: 0;
    font-size: 1.125rem;
}

.activity-log-note,
.activity-log-empty-state p {
    margin: 0.65rem 0 0;
    color: var(--color-muted);
}

.activity-log-list {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.activity-log-list li {
    padding: 0.85rem 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .activity-log-header {
        flex-direction: column;
    }

    .activity-log-status {
        align-self: flex-start;
    }
}

.user-accounts-section {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

.user-accounts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.user-accounts-description {
    margin: 0.65rem 0 0;
    color: var(--color-muted);
}

.user-accounts-count {
    flex-shrink: 0;
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid var(--color-action-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.user-accounts-card,
.user-accounts-empty-state {
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.user-accounts-card h2,
.user-accounts-empty-state h2 {
    margin: 0;
    font-size: 1.125rem;
}

.user-accounts-note,
.user-accounts-empty-state p {
    margin: 0.65rem 0 0;
    color: var(--color-muted);
}

.user-accounts-table-wrapper {
    margin-top: 1rem;
    overflow-x: auto;
}

.user-accounts-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
}

.user-accounts-table caption {
    padding: 0 0 0.75rem;
    color: var(--color-muted);
    text-align: left;
}

.user-accounts-table th,
.user-accounts-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.user-accounts-table thead th {
    background: var(--color-surface-raised);
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
}

.user-accounts-table tbody th {
    color: var(--color-primary);
    font-weight: 700;
}

.user-accounts-table tbody tr:last-child th,
.user-accounts-table tbody tr:last-child td {
    border-bottom: 0;
}

.user-account-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.user-account-status.is-inactive .status-dot {
    background: var(--color-disabled);
}

.user-account-status-form {
    margin: 0;
}

.user-account-status-button {
    padding: 0.45rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.user-account-status-button.is-deactivate {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Employee directory and workforce reporting. */
.data-page { display: grid; gap: 1rem; }
.data-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.data-page-heading .section-title { margin: .15rem 0 0; font-size: clamp(1.9rem, 3vw, 2.55rem); line-height: 1.12; }
.data-page-description { margin: .4rem 0 0; color: var(--color-muted); }
.employee-filter-bar { display: grid; gap: .65rem; padding: .85rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.employee-filter-primary { display: grid; grid-template-columns: minmax(16rem, 1.65fr) minmax(12rem, 1fr) auto; gap: .65rem; }
.search-control, .filter-control { min-height: 2.75rem; display: flex; align-items: center; gap: .6rem; padding: 0 .75rem; background: var(--color-surface-subtle); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.search-control:focus-within, .filter-control:focus-within { border-color: var(--color-focus); box-shadow: none; }
.search-control .ui-icon, .filter-control .ui-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.search-control input, .filter-control input { width: 100%; padding: 0; background: transparent; color: var(--color-text); border: 0; outline: 0; }
.search-control input:focus-visible, .filter-control input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.advanced-filters { position: relative; }
.advanced-filters summary { width: max-content; display: flex; align-items: center; gap: .45rem; color: var(--color-link); font-size: .78rem; font-weight: 600; cursor: pointer; }
.filter-active-dot { width: .45rem; height: .45rem; background: var(--color-link); border-radius: 50%; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--color-border); }
.clear-filter-link { position: absolute; align-self: end; justify-self: end; color: var(--color-muted); font-size: .78rem; }
.data-table-card, .report-panel { min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.data-table-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--color-border); }
.data-table-heading h2 { margin: 0; font-size: 1rem; }
.data-table-heading p { margin: .2rem 0 0; color: var(--color-muted); font-size: .76rem; }
.data-table-heading > p { margin: 0; white-space: nowrap; }
.employee-table-wrapper { border: 0; border-radius: 0; }
.employee-table { width: 100%; min-width: 58rem; border-collapse: collapse; }
.employee-table caption, .workforce-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.employee-table th, .employee-table td { padding: .72rem 1rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; font-size: .79rem; }
.employee-table thead th { background: var(--color-surface-subtle); color: var(--color-muted); font-size: .69rem; letter-spacing: normal; text-transform: none; }
.employee-table tbody tr:hover { background: color-mix(in srgb, var(--color-action-soft) 32%, transparent); }
.employee-table tbody tr:last-child > * { border-bottom: 0; }
.employee-identity { display: flex; align-items: center; gap: .65rem; color: var(--color-text); text-decoration: none; }
.employee-identity > span:last-child { min-width: 0; display: grid; gap: .05rem; }
.employee-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-identity small { color: var(--color-muted); font-weight: 500; }
.employee-avatar { width: 2rem; height: 2rem; display: grid; flex: 0 0 auto; place-items: center; background: var(--color-surface-raised); color: var(--color-text); border-radius: 50%; font-size: .68rem; font-weight: 700; }
.employee-empty-state, .report-empty-state { min-height: 18rem; display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.employee-empty-state > .ui-icon, .report-empty-state > .ui-icon { width: 2rem; height: 2rem; color: var(--color-link); }
.employee-empty-state h2, .report-empty-state h2 { margin: 0; font-size: 1rem; }
.employee-empty-state p, .report-empty-state p { margin: .25rem 0 0; color: var(--color-muted); }
.report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.report-metric { min-height: 8.75rem; display: flex; justify-content: space-between; gap: .8rem; padding: 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.report-metric p { margin: 0 0 .7rem; color: var(--color-muted); font-size: .82rem; }
.report-metric strong { display: block; font-size: 1.75rem; line-height: 1.1; }
.report-metric .report-metric-name { max-width: 12rem; overflow: hidden; font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; }
.report-metric div > span { display: block; margin-top: .7rem; color: var(--color-muted); font-size: .72rem; }
.report-metric-icon { width: 2.35rem; height: 2.35rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: .55rem; }
.report-metric-icon .ui-icon { width: 1.15rem; height: 1.15rem; }
.report-metric-icon--blue { background: #1e3a5f; color: #60a5fa; }
.report-metric-icon--green { background: #123c35; color: #34d399; }
.report-metric-icon--purple { background: #39285c; color: #c084fc; }
.report-metric-icon--orange { background: #49351b; color: #fbbf24; }
.report-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .85fr); gap: .75rem; }
.report-panel { padding: 1rem; }
.report-bars { display: grid; gap: .9rem; margin: 0; padding: .35rem 0 0; list-style: none; }
.report-bars li > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; }
.report-bar { width: 100%; height: .45rem; display: block; margin-top: .38rem; overflow: hidden; appearance: none; background: var(--color-surface-subtle); border: 0; border-radius: 999px; }
.report-bar::-webkit-progress-bar { background: var(--color-surface-subtle); border-radius: inherit; }
.report-bar::-webkit-progress-value { background: linear-gradient(90deg, #2563eb, #22d3ee); border-radius: inherit; }
.report-bar::-moz-progress-bar { background: linear-gradient(90deg, #2563eb, #22d3ee); border-radius: inherit; }
.workforce-table { width: 100%; border-collapse: collapse; }
.workforce-table th, .workforce-table td { padding: .7rem .65rem; border-bottom: 1px solid var(--color-border); text-align: left; font-size: .78rem; }
.workforce-table thead th { color: var(--color-muted); font-size: .68rem; letter-spacing: normal; text-transform: none; }
.workforce-table tbody tr:last-child > * { border-bottom: 0; }
.report-error h2, .report-error p { margin: 0; }
.report-error p { margin-top: .2rem; }

@media (max-width: 1100px) {
    .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .data-page-heading { flex-direction: column; }
    .data-page-heading > .ui-button { width: 100%; justify-content: center; }
    .employee-filter-primary, .advanced-filter-grid { grid-template-columns: 1fr; }
    .clear-filter-link { position: static; justify-self: start; }
    .report-metrics { grid-template-columns: 1fr; }
}

.user-account-status-button.is-deactivate:hover {
    filter: brightness(1.08);
}

.user-account-status-button.is-reactivate {
    background: var(--color-action-soft);
    border-color: var(--color-action-border);
    color: var(--color-link);
}

.user-account-status-button.is-reactivate:hover {
    filter: brightness(1.08);
}

.user-account-no-status-action {
    color: var(--color-muted);
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .user-accounts-header {
        flex-direction: column;
    }

    .user-accounts-count {
        align-self: flex-start;
    }

    .user-accounts-table {
        min-width: 36rem;
    }
}

.user-accounts-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.user-account-create-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: var(--color-action);
    color: var(--color-on-action);
    border: 1px solid var(--color-action);
    border-radius: 0.55rem;
    font-weight: 700;
    text-decoration: none;
}

.user-account-create-link:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.user-account-form-note {
    margin: 0.65rem 0 1.25rem;
    color: var(--color-muted);
}

@media (max-width: 640px) {
    .user-accounts-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .user-account-create-link {
        width: 100%;
    }
}

/* Reusable ABAP UI foundations. New screens use these semantic components;
   existing feature styles remain available during the incremental migration. */
.ui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ui-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-icon--filled {
    fill: currentColor;
    stroke: none;
}

.ui-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
}

.ui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ui-page-header h1,
.ui-page-header p {
    margin-top: 0;
}

.ui-page-header p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.ui-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.ui-button {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.ui-button--primary {
    background: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-on-action);
}

.ui-button--primary:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.ui-button--secondary {
    background: var(--color-surface-raised);
    border-color: var(--color-control-border);
    color: var(--color-text);
}

.ui-button--secondary:hover,
.ui-button--tertiary:hover {
    background: var(--color-action-soft);
    border-color: var(--color-action-border);
}

.ui-button--tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--color-link);
}

.ui-button--danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.ui-button--danger:hover {
    filter: brightness(1.08);
}

.ui-button[aria-busy="true"] {
    cursor: progress;
}

.ui-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.ui-status__symbol {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
}

.ui-status__symbol .ui-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.ui-status--completed,
.ui-status--enabled,
.ui-status--active {
    color: var(--color-success);
}

.ui-status--running {
    color: var(--color-running);
}

.ui-status--running .ui-status__symbol {
    border-radius: var(--radius-small);
    transform: rotate(45deg);
}

.ui-status--running .ui-icon {
    transform: rotate(-45deg);
}

.ui-status--failed {
    color: var(--color-danger);
}

.ui-status--failed .ui-status__symbol {
    border-radius: var(--radius-small);
}

.ui-status--disabled,
.ui-status--inactive,
.ui-status--draft {
    color: var(--color-disabled);
}

.ui-status--draft .ui-status__symbol {
    border-radius: var(--radius-small);
}

.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-control);
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.ui-alert--info {
    border-left-color: var(--color-running);
}

.ui-alert--success {
    border-left-color: var(--color-success);
}

.ui-alert--warning {
    border-left-color: var(--color-warning);
}

.ui-alert--danger {
    border-left-color: var(--color-danger);
}

.ui-empty-state {
    display: grid;
    min-height: 10rem;
    place-items: center;
    padding: 2rem;
    text-align: center;
    color: var(--color-muted);
}

.ui-empty-state__content {
    max-width: 30rem;
}

.ui-empty-state__content > :first-child {
    margin-top: 0;
}

.ui-empty-state__content > :last-child {
    margin-bottom: 0;
}

.ui-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

.ui-table th,
.ui-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.ui-table thead th {
    background: var(--color-surface-raised);
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
}

.ui-table tbody tr:last-child > * {
    border-bottom: 0;
}

.ui-required-marker {
    color: var(--color-danger);
}

@media (max-width: 640px) {
    .ui-page-header {
        flex-direction: column;
    }

    .ui-page-header .ui-action-group,
    .ui-page-header .ui-button {
        width: 100%;
    }
}

/* AI Assistant, Activity Log, and User Accounts. */
.assistant-access-state, .audit-access-state { min-height: 2.5rem; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: var(--color-success-soft); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 45%, transparent); border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.assistant-access-state .ui-icon, .audit-access-state .ui-icon { width: .95rem; height: .95rem; }
.assistant-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.assistant-layout--single { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.assistant-composer, .assistant-response { min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.assistant-composer { display: grid; gap: 1rem; padding: 1.1rem; }
.assistant-composer > header, .assistant-response > header { display: flex; align-items: center; gap: .7rem; }
.assistant-composer h2, .assistant-response h2 { margin: 0; font-size: 1rem; }
.assistant-composer header p, .assistant-response header p { margin: .2rem 0 0; color: var(--color-muted); font-size: .74rem; }
.assistant-panel-icon { width: 2.35rem; height: 2.35rem; display: grid; flex: 0 0 auto; place-items: center; background: #39285c; color: #c084fc; border-radius: .55rem; }
.assistant-panel-icon .ui-icon { width: 1.15rem; height: 1.15rem; }
.assistant-question-field textarea { min-height: 16rem; resize: vertical; }
.assistant-field-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; color: var(--color-muted); font-size: .68rem; }
.assistant-privacy-note { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem; background: var(--color-warning-soft); color: var(--color-warning); border-radius: var(--radius-control); }
.assistant-privacy-note .ui-icon { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .15rem; }
.assistant-privacy-note p { display: grid; gap: .1rem; margin: 0; }
.assistant-privacy-note span { color: var(--color-muted); font-size: .72rem; }
.assistant-submit { width: 100%; justify-content: center; }
.assistant-response > header { padding: 1.1rem; border-bottom: 1px solid var(--color-border); }
.assistant-response-content { padding: 1.1rem; }
.assistant-response pre { margin: 0; color: var(--color-text); font: inherit; font-size: .82rem; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.assistant-response footer { padding: .7rem 1.1rem; background: var(--color-surface-subtle); color: var(--color-muted); border-top: 1px solid var(--color-border); font-size: .7rem; }
.audit-card { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.audit-list { margin: 0; padding: 0; list-style: none; }
.audit-list li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .85rem 1.05rem; border-bottom: 1px solid var(--color-border); }
.audit-list li:last-child { border-bottom: 0; }
.audit-event-icon { width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--color-surface-subtle); color: var(--color-link); border-radius: 50%; }
.audit-event-icon .ui-icon { width: 1rem; height: 1rem; }
.audit-list p { margin: 0; color: var(--color-text); font-family: ui-monospace, "Cascadia Code", monospace; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.audit-list li div > span { color: var(--color-muted); font-size: .68rem; }
.audit-empty-state, .accounts-empty-state { min-height: 18rem; display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.audit-empty-state > .ui-icon, .accounts-empty-state > .ui-icon { width: 2.1rem; height: 2.1rem; color: var(--color-link); }
.audit-empty-state h2, .accounts-empty-state h2 { margin: 0; font-size: 1rem; }
.audit-empty-state p, .accounts-empty-state p { margin: .25rem 0 0; color: var(--color-muted); }
.account-table-wrapper { border: 0; border-radius: 0; }
.account-table { width: 100%; min-width: 48rem; border-collapse: collapse; }
.account-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.account-table th, .account-table td { padding: .78rem 1rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; font-size: .78rem; }
.account-table thead th { background: var(--color-surface-subtle); color: var(--color-muted); font-size: .68rem; letter-spacing: normal; text-transform: none; }
.account-table tbody tr:last-child > * { border-bottom: 0; }
.user-identity { display: flex; align-items: center; gap: .65rem; }
.user-avatar { width: 2rem; height: 2rem; display: grid; flex: 0 0 auto; place-items: center; background: var(--color-action-soft); color: var(--color-link); border-radius: 50%; font-size: .68rem; font-weight: 700; }
.user-identity > span:last-child { display: grid; gap: .05rem; }
.user-identity small { color: var(--color-muted); font-weight: 500; }
.role-chip { display: inline-flex; padding: .22rem .5rem; background: var(--color-surface-subtle); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 999px; font-size: .7rem; font-weight: 700; }
.account-action { min-height: 2rem; padding: .35rem .6rem; background: transparent; border-radius: .4rem; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.account-action--danger { color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 55%, transparent); }
.account-action--success { color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 55%, transparent); }
.account-action:hover { background: var(--color-surface-subtle); }
.account-protected { color: var(--color-muted); font-size: .72rem; }

@media (max-width: 900px) { .assistant-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .assistant-access-state, .audit-access-state { align-self: flex-start; }
    .assistant-field-meta { align-items: flex-start; flex-direction: column; gap: .15rem; }
}

/* Responsive workflow detail and final form accessibility polish. */
.workflow-detail-page { display: grid; gap: 1rem; }
.workflow-detail-page > .back-link { width: fit-content; margin-bottom: .25rem; }
.workflow-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.workflow-detail-header .section-title { margin-bottom: .4rem; }
.workflow-identifier { margin: 0; color: var(--color-muted); font-size: .82rem; }
.workflow-detail-header > .ui-status { margin-top: .4rem; padding: .45rem .7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; }
.workflow-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.workflow-action-bar form { margin: 0 0 0 auto; }
.workflow-summary-card, .workflow-detail-card { min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.workflow-summary-card > .panel-heading, .workflow-detail-card > .panel-heading { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.workflow-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.workflow-summary-grid > div { min-width: 0; padding: 1rem; border-right: 1px solid var(--color-border); }
.workflow-summary-grid > div:nth-child(3) { border-right: 0; }
.workflow-summary-grid .workflow-summary-description { grid-column: 1 / -1; border-top: 1px solid var(--color-border); border-right: 0; }
.workflow-summary-grid dt, .workflow-inline-details dt { color: var(--color-muted); font-size: .68rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.workflow-summary-grid dd, .workflow-inline-details dd { min-width: 0; margin: .3rem 0 0; overflow-wrap: anywhere; font-size: .8rem; }
.workflow-detail-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.panel-count { min-width: 1.75rem; min-height: 1.75rem; display: grid; place-items: center; background: var(--color-surface-subtle); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 999px; font-size: .72rem; font-weight: 700; }
.workflow-item-list, .workflow-execution-list { margin: 0; padding: 0; list-style: none; }
.workflow-item-list > li { display: flex; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--color-border); }
.workflow-item-list > li:last-child, .workflow-execution-list > li:last-child { border-bottom: 0; }
.workflow-sequence { width: 1.75rem; height: 1.75rem; display: grid; flex: 0 0 auto; place-items: center; background: var(--color-action-soft); color: var(--color-link); border-radius: 50%; font-size: .72rem; font-weight: 700; }
.workflow-item-content { min-width: 0; flex: 1; }
.workflow-item-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.workflow-item-heading h3, .workflow-item-heading h5 { margin: 0; font-size: .86rem; }
.workflow-item-content > p, .workflow-task-outcomes li > p { margin: .35rem 0 0; color: var(--color-muted); font-size: .74rem; overflow-wrap: anywhere; }
.workflow-type-chip, .workflow-requirement { display: inline-flex; color: var(--color-muted); font-size: .67rem; font-weight: 700; }
.workflow-type-chip { padding: .18rem .42rem; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: 999px; }
.workflow-requirement { margin-top: .45rem; }
.workflow-row-actions { display: flex; flex: 0 0 auto; align-items: flex-start; gap: .55rem; font-size: .7rem; font-weight: 700; }
.workflow-row-actions a { color: var(--color-link); text-underline-offset: .15rem; }
.workflow-row-actions .danger-link { color: var(--color-danger); }
.workflow-schedule-note { margin: .8rem; font-size: .72rem; }
.workflow-inline-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0 0; }
.workflow-inline-details > div { min-width: 0; }
.workflow-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; }
.workflow-inline-form small { color: var(--color-muted); }
.workflow-empty-state { min-height: 10rem; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 1.5rem; text-align: left; }
.workflow-empty-state > .ui-icon { width: 1.8rem; height: 1.8rem; color: var(--color-link); }
.workflow-empty-state h3 { margin: 0; font-size: .9rem; }
.workflow-empty-state p { margin: .2rem 0 0; color: var(--color-muted); font-size: .74rem; }
.workflow-execution-list > li { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.workflow-execution-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.workflow-execution-heading > div { display: flex; align-items: center; gap: .8rem; }
.workflow-execution-heading h3 { margin: 0; font-size: .86rem; }
.workflow-execution-heading time { color: var(--color-muted); font-size: .7rem; }
.workflow-result-summary { margin: .65rem 0; color: var(--color-muted); font-size: .78rem; }
.workflow-task-outcomes { margin-top: .8rem; padding: .85rem; background: var(--color-surface-subtle); border-radius: var(--radius-control); }
.workflow-task-outcomes h4 { margin: 0 0 .6rem; font-size: .8rem; }
.workflow-task-outcomes ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.workflow-task-outcomes li { padding: .7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.workflow-outcome-form { margin-top: .8rem; }
.workflow-outcome-form fieldset { display: grid; gap: .55rem; margin: 0; padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.workflow-outcome-form legend, .workflow-outcome-form label { color: var(--color-muted); font-size: .74rem; font-weight: 700; }
.workflow-outcome-form input { width: 100%; min-height: 2.65rem; padding: .55rem .7rem; background: var(--color-surface-raised); color: var(--color-text); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); }
.workflow-outcome-form fieldset > div { display: flex; flex-wrap: wrap; gap: .55rem; }
.form-field small { color: var(--color-muted); font-size: .75rem; line-height: 1.45; }

@media (max-width: 1050px) {
    .workflow-detail-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .workflow-detail-header, .workflow-execution-heading { flex-direction: column; }
    .workflow-action-bar, .workflow-action-bar form, .workflow-action-bar .ui-button { width: 100%; }
    .workflow-action-bar form { margin-left: 0; }
    .workflow-summary-grid { grid-template-columns: 1fr; }
    .workflow-summary-grid > div, .workflow-summary-grid > div:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .workflow-summary-grid .workflow-summary-description { grid-column: auto; border-top: 0; border-bottom: 0; }
    .workflow-item-list > li { flex-wrap: wrap; }
    .workflow-row-actions { width: 100%; padding-left: 2.5rem; }
    .workflow-inline-details { grid-template-columns: 1fr; }
    .workflow-inline-form .ui-button, .workflow-outcome-form .ui-button { width: 100%; }
    .workflow-outcome-form fieldset > div { display: grid; }
    .employee-form-section, .profile-section, .payroll-section, .directory-section { padding: 1rem; border-radius: .8rem; }
    .employee-form-card { padding: 1rem; }
}

@media (max-width: 380px) {
    .page-content { width: min(calc(100% - 1.25rem), var(--content-width)); }
    .topbar { gap: .65rem; padding-inline: .65rem; }
    .section-title { font-size: 1.75rem; overflow-wrap: anywhere; }
}

/* Employee profile and protected payroll detail screens. */
.profile-section, .payroll-section { display: grid; gap: 1rem; }
.profile-section > .back-link, .payroll-section > .back-link { width: fit-content; margin-bottom: .25rem; }
.profile-hero, .payroll-hero { margin-bottom: 0; padding: 1.1rem; background: linear-gradient(120deg, var(--color-surface-subtle), var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.profile-identity { min-width: 0; display: flex; align-items: center; gap: 1rem; }
.profile-identity > div { min-width: 0; }
.profile-avatar { width: 3.5rem; height: 3.5rem; display: grid; flex: 0 0 auto; place-items: center; background: linear-gradient(135deg, var(--color-action), #22d3ee); color: #fff; border-radius: .85rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--color-action) 24%, transparent); font-size: .95rem; font-weight: 700; letter-spacing: normal; }
.payroll-avatar { background: linear-gradient(135deg, #0f766e, #22d3ee); font-size: 1.35rem; }
.profile-hero .section-title, .payroll-hero .section-title { margin: .2rem 0; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.profile-hero .profile-status { margin-top: .25rem; background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }
.profile-hero .profile-status .status-dot { background: currentColor; box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 15%, transparent); }
.profile-actions { margin: 0; padding: .7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.profile-grid, .payroll-grid { gap: .8rem; }
.profile-card, .payroll-card { padding: 0; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-panel); }
.profile-card-heading { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.profile-card-heading > span { width: 2rem; height: 2rem; display: grid; flex: 0 0 auto; place-items: center; background: var(--color-action-soft); color: var(--color-link); border-radius: .5rem; }
.profile-card-heading > span .ui-icon { width: 1rem; height: 1rem; }
.profile-card .profile-card-heading h2, .payroll-card .profile-card-heading h2 { margin: 0; font-size: .92rem; }
.profile-card-heading p { margin: .1rem 0 0; color: var(--color-muted); font-size: .68rem; }
.profile-card .profile-details, .payroll-card .payroll-details { padding: 0 1rem; }
.profile-card .profile-details > div:first-child, .payroll-card .payroll-details > div:first-child { border-top: 0; }
.profile-card .profile-details dd { font-size: .82rem; font-weight: 600; }
.payroll-access-status .ui-icon { width: 1rem; height: 1rem; }
.payroll-details div { padding-block: .7rem; }
.payroll-highlight-row { margin-inline: -.5rem; padding-inline: .5rem; background: var(--color-success-soft); border-radius: .45rem; }
.payroll-highlight-row dd { font-size: 1rem; }
.payroll-performance-card .payroll-note { margin: 0; padding: .75rem 1rem; background: var(--color-surface-subtle); border-top: 1px solid var(--color-border); }

@media (max-width: 640px) {
    .profile-hero, .payroll-hero { padding: .9rem; }
    .profile-identity { align-items: flex-start; }
    .profile-avatar { width: 3rem; height: 3rem; }
    .profile-actions { display: grid; }
    .profile-actions .ui-button { width: 100%; }
    .profile-card .profile-details, .payroll-card .payroll-details { padding-inline: .85rem; }
}

@media (max-width: 420px) {
    .profile-identity { display: grid; }
}

/* Agent execution review and irreversible-action confirmation screens. */
.agent-execution-page { display: grid; gap: 1rem; }
.agent-execution-page > .back-link { width: fit-content; margin-bottom: .25rem; }
.agent-execution-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.agent-execution-header .section-title { margin-bottom: .25rem; }
.agent-execution-header .page-message { margin: 0; font-family: ui-monospace, "Cascadia Code", monospace; font-size: .72rem; overflow-wrap: anywhere; }
.agent-execution-header > .ui-status { margin-top: .5rem; padding: .45rem .7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; }
.agent-execution-card { min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.agent-execution-summary .profile-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .25rem 1rem; }
.agent-execution-summary .profile-details > div { min-width: 0; grid-template-columns: minmax(8rem, .65fr) 1fr; }
.agent-execution-summary .profile-details > div:nth-child(odd) { padding-right: 1rem; border-right: 1px solid var(--color-border); }
.agent-execution-summary .profile-details > div:nth-child(even) { padding-left: 1rem; }
.agent-execution-summary a { color: var(--color-link); text-underline-offset: .15rem; }
.agent-execution-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.agent-execution-payload { max-height: 30rem; margin: 0; padding: 1rem; overflow: auto; color: var(--color-text); font: .78rem/1.65 ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.agent-execution-result-state { margin: 1rem; }
.agent-execution-result-state p { margin: 0; }
.agent-history-page .employee-form-heading > .ui-status { margin-top: .5rem; }
.agent-history-page .employee-table-wrapper { margin-top: 1rem; }
.agent-history-empty .ui-icon { width: 2rem; height: 2rem; color: var(--color-link); }
.agent-history-empty h2 { margin: .6rem 0 .2rem; font-size: 1rem; }
.agent-history-empty p { margin: 0; color: var(--color-muted); }
.destructive-page { max-width: 56rem; margin-inline: auto; }
.destructive-access-badge { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }
.destructive-access-badge .ui-icon { width: 1rem; height: 1rem; }
.destructive-target-card { display: flex; align-items: center; gap: .85rem; padding: 1rem; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.destructive-target-icon { width: 2.5rem; height: 2.5rem; display: grid; flex: 0 0 auto; place-items: center; background: var(--color-danger-soft); color: var(--color-danger); border-radius: .6rem; }
.destructive-target-icon .ui-icon { width: 1.15rem; height: 1.15rem; }
.destructive-target-card p { margin: 0; }
.destructive-target-card p + p { margin-top: .15rem; color: var(--color-muted); font-size: .78rem; }
.destructive-warning { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; background: var(--color-danger-soft); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-danger) 55%, transparent); border-left-width: 3px; border-radius: var(--radius-control); }
.destructive-warning-icon { width: 2rem; height: 2rem; display: grid; flex: 0 0 auto; place-items: center; color: var(--color-danger); border: 1px solid currentColor; border-radius: 50%; }
.destructive-warning-icon .ui-icon { width: 1rem; height: 1rem; }
.destructive-warning strong { color: var(--color-danger); }
.destructive-warning p { margin: .25rem 0 0; color: var(--color-muted); font-size: .8rem; }
.destructive-confirm-button { min-height: 2.75rem; }

@media (max-width: 900px) {
    .agent-execution-content-grid { grid-template-columns: 1fr; }
    .agent-execution-summary .profile-details { grid-template-columns: 1fr; }
    .agent-execution-summary .profile-details > div:nth-child(odd), .agent-execution-summary .profile-details > div:nth-child(even) { padding-inline: 0; border-right: 0; }
}

@media (max-width: 640px) {
    .agent-execution-header { flex-direction: column; }
    .agent-execution-header > .ui-status { margin-top: 0; }
    .destructive-page .employee-form-actions { padding-top: .25rem; }
    .destructive-confirm-button { width: 100%; }
}

/* Shared typography roles. Keep this contract after legacy component rules. */
.section-title,
.authentication-title {
    font-size: var(--text-page-title);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-normal);
}

.dashboard-heading .section-title {
    font-size: clamp(1.75rem, 2vw, 2rem);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-title);
}

.dashboard-heading .section-title:first-child,
.data-page-heading .section-title:first-child,
.directory-header .section-title:first-child,
.employee-form-heading .section-title:first-child {
    margin-top: 0;
}

.profile-hero .section-title,
.payroll-hero .section-title {
    font-size: clamp(1.6rem, 3vw, 2rem);
}

.section-eyebrow {
    color: var(--color-muted);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}

.navigation-heading {
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}

.navigation-link {
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    line-height: var(--leading-ui);
}

.topbar-title {
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
}

.panel-heading h2,
.data-table-heading h2,
.employee-form-card h2,
.assistant-composer h2,
.assistant-response h2,
.profile-card .profile-card-heading h2,
.payroll-card .profile-card-heading h2,
.workflow-item-heading h3,
.workflow-item-heading h5,
.workflow-execution-heading h3,
.ui-empty-state h2,
.ui-empty-state h3,
.dashboard-empty strong {
    font-size: var(--text-section-title);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-normal);
}

.ui-button,
.primary-button,
.directory-filter-button,
.employee-submit-button,
.employee-delete-button,
.user-account-status-button,
.account-action,
.theme-toggle,
.logout-button,
.language-selector button {
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
    letter-spacing: var(--tracking-normal);
}

.form-field label,
.status-filter-form label,
.workflow-outcome-form legend,
.workflow-outcome-form label {
    font-size: var(--text-ui);
    font-weight: var(--weight-medium);
    line-height: var(--leading-ui);
    letter-spacing: var(--tracking-normal);
}

.form-field input,
.form-field select,
.form-field textarea,
.status-filter-form select,
.search-control input,
.filter-control input {
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-normal);
}

.ui-table th,
.ui-table td,
.workflow-table th,
.workflow-table td,
.employee-table th,
.employee-table td,
.workforce-table th,
.workforce-table td,
.user-accounts-table th,
.user-accounts-table td,
.account-table th,
.account-table td {
    font-size: var(--text-table);
    line-height: var(--leading-ui);
}

.ui-table thead th,
.workflow-table thead th,
.employee-table thead th,
.workforce-table thead th,
.user-accounts-table thead th,
.account-table thead th {
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}

.workflow-summary-grid dt,
.workflow-inline-details dt {
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
}

.ui-status,
.module-status,
.profile-status,
.employee-status,
.user-account-status,
.role-chip,
.agent-model-chip,
.form-access-badge,
.assistant-access-state,
.audit-access-state {
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-normal);
}

.dashboard-subtitle,
.page-message,
.data-page-description,
.panel-heading p,
.data-table-heading p,
.form-help,
.form-field small,
.profile-card-heading p,
.result-count,
.permission-message,
.ui-empty-state p,
.dashboard-empty span {
    font-weight: var(--weight-regular);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-normal);
}

.dashboard-subtitle,
.page-message,
.data-page-description,
.ui-empty-state p {
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
}

.form-help,
.form-field small,
.profile-card-heading p,
.panel-heading p,
.data-table-heading p,
.result-count,
.permission-message,
.dashboard-empty span {
    font-size: var(--text-caption);
}

.metric-card p,
.compact-list strong,
.readiness-status strong,
.account-details strong,
.profile-card .profile-details dd {
    font-weight: var(--weight-semibold);
}

.ui-table tbody th,
.workflow-table tbody th,
.employee-table tbody th,
.workforce-table tbody th,
.user-accounts-table tbody th,
.account-table tbody th {
    font-weight: var(--weight-medium);
}

.metric-card strong,
.report-metric strong,
.business-snapshot .business-metric dd > strong,
.panel-count,
.workflow-sequence,
.employee-avatar,
.user-avatar,
.account-avatar,
.profile-avatar {
    font-weight: var(--weight-bold);
}

.agent-template-prompt,
.audit-list p,
.agent-execution-header .page-message,
.agent-execution-payload {
    font-family: var(--font-mono);
}

@media (max-width: 380px) {
    .section-title {
        font-size: 1.75rem;
    }
}