/* power/XWUIAuthBlocks/XWUIAuthBlocks.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* power/XWUIAuthForgotPassword/XWUIAuthForgotPassword.css */
/* Styles for XWUIAuthForgotPassword. */

/* power/XWUIAuthOTP/XWUIAuthOTP.css */
/* Styles for XWUIAuthOTP. */

/* power/XWUIAuthSignIn/XWUIAuthSignIn.css */
/* Styles for XWUIAuthSignIn. */

/* power/XWUIAuthSignInMobile/XWUIAuthSignInMobile.css */
/* Styles for XWUIAuthSignInMobile. */

/* power/XWUIAuthSignOut/XWUIAuthSignOut.css */
/* Styles for XWUIAuthSignOut. */

/* power/XWUIAuthSignUp/XWUIAuthSignUp.css */
/* Styles for XWUIAuthSignUp. */

/* power/XWUIAuthUnlock/XWUIAuthUnlock.css */
/* Styles for XWUIAuthUnlock. */

/* power/XWUIChangeDiffViewer/XWUIChangeDiffViewer.css */
/**
 * XWUIChangeDiffViewer Component Styles
 */

.xwui-change-diff-viewer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
}

.xwui-change-diff-viewer-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-change-diff-viewer-changes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-sm, 0.5rem);
}

.xwui-change-diff-viewer-change-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-sm, 0.5rem);
    background: var(--bg-secondary, #f8f9fa);
    border-radius: var(--radius-md, 8px);
}

.xwui-change-diff-viewer-field-label {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-change-diff-viewer-diff {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    flex-wrap: wrap;
}

.xwui-change-diff-viewer-before,
.xwui-change-diff-viewer-after {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-sm, 4px);
}

.xwui-change-diff-viewer-before {
    background: var(--bg-error-light, #fee2e2);
    color: var(--text-error, #dc2626);
}

.xwui-change-diff-viewer-after {
    background: var(--bg-success-light, #d1fae5);
    color: var(--text-success, #059669);
}

.xwui-change-diff-viewer-label {
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-change-diff-viewer-value {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-change-diff-viewer-arrow {
    color: var(--text-secondary, #6c757d);
    font-weight: var(--font-weight-bold, 700);
}


/* power/XWUIChartSimple/XWUIChartSimple.css */
/**
 * XWUIChartSimple Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-chart-simple {
    width: 100%;
    background: var(--bg-primary);
    border: var(--border-chart-width, var(--border-width-regular, 1.5px)) var(--border-chart-style, solid) var(--border-chart-color, var(--border-color));
    border-radius: var(--radius-chart, var(--radius-md, 8px));
    padding: var(--spacing-md, 1rem);
}

.xwui-chart-simple-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md, 1rem);
    text-align: center;
}

.xwui-chart-simple-svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-md, 1rem);
}

.xwui-chart-simple-svg-container svg {
    max-width: 100%;
    height: auto;
}

.xwui-chart-simple-legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg, 1.5rem);
    flex-wrap: wrap;
}

.xwui-chart-simple-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-chart-simple-legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-xs, 2px);
}

.xwui-chart-simple-legend-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}


/* power/XWUICodeBlock/XWUICodeBlock.css */
/**
 * XWUICodeBlock Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/code/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-codeblock {
    position: relative;
    border-radius: var(--radius-code, var(--radius-md, 8px));
    overflow: hidden;
}

.xwui-codeblock-copy {
    position: absolute;
    top: var(--spacing-sm, 0.5rem);
    right: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border: var(--border-code-width, var(--border-width-regular, 1.5px)) var(--border-code-style, solid) var(--border-code-color, var(--border-color));
    border-radius: var(--radius-code, var(--radius-sm, 6px));
    background: var(--bg-primary);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    z-index: 1;
    transition: all 0.2s;
}

.xwui-codeblock-copy:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.xwui-codeblock-pre {
    margin: 0;
    padding: var(--spacing-md, 1rem);
    overflow-x: auto;
    font-family: var(--font-code-family, var(--font-family-mono, 'Courier New', Courier, monospace));
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    background: var(--bg-secondary);
    border: var(--border-code-width, var(--border-width-regular, 1.5px)) var(--border-code-style, solid) var(--border-code-color, var(--border-color));
    border-radius: var(--radius-code, var(--radius-md, 8px));
}

.xwui-codeblock-line-numbers {
    padding-left: var(--spacing-2xl, 3rem);
}

.xwui-codeblock-pre code {
    display: block;
    white-space: pre;
    word-wrap: normal;
    tab-size: 2;
}


/* power/XWUICommand/XWUICommand.css */
/**
 * XWUICommand Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 */

.xwui-command {
    width: 100%;
    max-width: 640px;
    background: var(--bg-primary);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    border-radius: var(--radius-input, var(--radius-md, 8px));
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.xwui-command > div:first-child {
    padding: var(--spacing-sm, 0.75rem);
    border-bottom: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
}

.xwui-command > div:last-child {
    max-height: 300px;
    overflow-y: auto;
}


/* power/XWUIComponentPropertyForm/XWUIComponentPropertyForm.css */
/* Styles for XWUIComponentPropertyForm. */

/* power/XWUIConsole/XWUIConsole.css */
/**
 * XWUIConsole Component Styles
 * Chrome DevTools-like console styling
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-console-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}


.xwui-console {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: var(--border-console-width, var(--border-width-regular, 1.5px)) var(--border-console-style, solid) var(--border-console-color, var(--border-color));
    border-radius: var(--radius-console, var(--radius-md, 8px));
    overflow: hidden;
}

/* Toolbar */
.xwui-console-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 8px);
    padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
    background: var(--bg-secondary);
    border-bottom: var(--border-console-width, var(--border-width-regular, 1.5px)) var(--border-console-style, solid) var(--border-console-color, var(--border-color));
    flex-shrink: 0;
}

.xwui-console-filter-btn {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 12px);
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--border-button-color, var(--border-color));
    border-radius: var(--radius-button, var(--radius-sm, 6px));
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-xs, 11px);
    font-weight: var(--font-weight-medium, 500);
    transition: all 0.2s ease;
    font-family: inherit;
}

.xwui-console-filter-btn:hover {
    background: var(--bg-hover);
}

.xwui-console-filter-btn.active {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

.xwui-console-clear-btn {
    margin-left: auto;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 12px);
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--border-button-color, var(--border-color));
    border-radius: var(--radius-button, var(--radius-sm, 6px));
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-xs, 11px);
    font-weight: var(--font-weight-medium, 500);
    transition: all 0.2s ease;
    font-family: inherit;
}

.xwui-console-clear-btn:hover {
    background: var(--bg-hover);
}

/* Log List Container (matching prototype) */
.xwui-console-log-list {
    border-radius: var(--radius-lg);
    padding: var(--spacing-md, 1rem);
    border: var(--border-console-width, var(--border-width-regular, 1.5px)) var(--border-console-style, solid) var(--border-console-color, var(--border-color));
    background: var(--bg-elevated);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Messages Container */
.xwui-console-messages {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.xwui-console-messages::-webkit-scrollbar {
    width: 12px;
}

.xwui-console-messages::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.xwui-console-messages::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-md);
}

.xwui-console-messages::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* Log Row (matching prototype) */
.xwui-console-log-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    position: relative;
    transition: background-color 0.2s ease;
}

/* Hover highlighting */
.xwui-console-log-row:hover {
    background-color: var(--bg-hover, rgba(128, 128, 128, 0.1));
    border-radius: var(--radius-sm, 4px);
}

/* Copy button container */
.xwui-console-copy-button {
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.xwui-console-log-row:hover .xwui-console-copy-button {
    opacity: 1;
}

.xwui-console-copy-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #888);
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: var(--radius-sm, 4px);
    width: 24px;
    height: 24px;
}

.xwui-console-copy-btn:hover {
    background-color: var(--bg-hover, rgba(128, 128, 128, 0.15));
    color: var(--text-primary, #000);
}

.xwui-console-copy-btn:active {
    background-color: var(--bg-active, rgba(128, 128, 128, 0.25));
}

/* Badge with colored background (merged circle and label) */
.xwui-console-badge {
    min-width: 64px;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    font-weight: 500;
    background: var(--bg-secondary);
    color: inherit;
}

/* Message (matching prototype) */
.xwui-console-msg {
    flex: 1;
    word-break: break-word;
}

/* Message Icons */
.xwui-console-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
}

.xwui-console-icon-error::before {
    content: '●';
    color: var(--accent-error);
}

.xwui-console-icon-warn::before {
    content: '●';
    color: var(--accent-warning);
}

.xwui-console-icon-info::before {
    content: 'i';
    color: var(--accent-primary);
    font-style: italic;
    font-weight: bold;
}

.xwui-console-icon-log::before {
    content: '';
}

.xwui-console-icon-debug::before {
    content: '';
}

/* Message Content */
.xwui-console-message-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.xwui-console-timestamp {
    color: var(--text-tertiary);
    font-size: 11px;
    flex-shrink: 0;
}

.xwui-console-source {
    color: var(--text-tertiary);
    font-size: 11px;
    flex-shrink: 0;
    font-style: italic;
}

.xwui-console-message-text {
    flex: 1;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Message Level Styles */
.xwui-console-message-error {
    border-left: 3px solid var(--accent-error);
    background: var(--color-error-bg-light, rgba(244, 67, 54, 0.1));
}

.xwui-console-message-error .xwui-console-message-text {
    color: var(--accent-error);
}

.xwui-console-message-warn {
    border-left: 3px solid var(--accent-warning);
    background: var(--color-warning-bg-light, rgba(255, 193, 7, 0.1));
}

.xwui-console-message-warn .xwui-console-message-text {
    color: var(--accent-warning);
}

.xwui-console-message-info {
    border-left: 3px solid var(--accent-primary);
    background: var(--color-info-bg-light, rgba(33, 150, 243, 0.1));
}

.xwui-console-message-info .xwui-console-message-text {
    color: var(--accent-primary);
}

.xwui-console-message-log .xwui-console-message-text {
    color: var(--text-primary);
}

.xwui-console-message-debug .xwui-console-message-text {
    color: var(--text-tertiary);
}

/* Data Display */
.xwui-console-data {
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
}


/* Stack Trace */
.xwui-console-stack {
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--accent-error);
    border-left: 2px solid var(--accent-error);
}


/* Command Input */
.xwui-console-input {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    flex-shrink: 0;
}

.xwui-console-input:focus {
    background: var(--bg-elevated);
}

.xwui-console-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* power/XWUIDashboard/XWUIDashboard.css */
/* src/components/power/XWUIDashboard/XWUIDashboard.css
 *
 * XWUIDashboard — generic dashboard composer.
 * Filter bar → KPI ribbon → widget grid → extra sections, vertically stacked.
 * Theme tokens only; no hardcoded colors.
 *
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{theme}.css (MANDATORY)
 */

.xwui-dashboard {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--xwui-dashboard-gap, var(--spacing-md, 1rem));
    min-height: 0;
}

/* ── Filter bar slot ──────────────────────────────────────────────────────*/
.xwui-dashboard-filters {
    box-sizing: border-box;
}

/* ── KPI ribbon ───────────────────────────────────────────────────────────
   N-up on desktop (default 4), halved on tablet, single-col on phone. */
.xwui-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(var(--xwui-dashboard-kpi-cols, 4), minmax(0, 1fr));
    gap: var(--xwui-dashboard-gap, var(--spacing-md, 1rem));
}
@media (max-width: 1023px) {
    .xwui-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .xwui-dashboard-kpis { grid-template-columns: 1fr; }
}

.xwui-dashboard-kpi {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--border-container-color, var(--border-color));
    background: var(--surface-primary, var(--bg-color));
    min-width: 0;
}
.xwui-dashboard-kpi-clickable {
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.xwui-dashboard-kpi-clickable:hover {
    border-color: var(--accent-color, currentColor);
}
.xwui-dashboard-kpi-clickable:focus-visible {
    outline: 2px solid var(--focus-ring-color, var(--accent-color));
    outline-offset: 2px;
}

.xwui-dashboard-kpi-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--surface-secondary, rgba(0, 0, 0, 0.04));
    color: var(--accent-color, var(--text-primary));
}

/* Semantic tints — driven by the data-semantic attribute set in the JS. */
.xwui-dashboard-kpi[data-semantic="success"] .xwui-dashboard-kpi-icon {
    background: var(--status-success-bg, rgba(34, 139, 34, 0.12));
    color: var(--status-success, #228b22);
}
.xwui-dashboard-kpi[data-semantic="warning"] .xwui-dashboard-kpi-icon {
    background: var(--status-warning-bg, rgba(217, 119, 6, 0.12));
    color: var(--status-warning, #d97706);
}
.xwui-dashboard-kpi[data-semantic="danger"] .xwui-dashboard-kpi-icon {
    background: var(--status-danger-bg, rgba(220, 38, 38, 0.12));
    color: var(--status-danger, #dc2626);
}
.xwui-dashboard-kpi[data-semantic="info"] .xwui-dashboard-kpi-icon {
    background: var(--status-info-bg, rgba(37, 99, 235, 0.12));
    color: var(--status-info, #2563eb);
}

.xwui-dashboard-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.xwui-dashboard-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary, var(--text-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwui-dashboard-kpi-label {
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--text-secondary);
}
.xwui-dashboard-kpi-sublabel {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-tertiary, var(--text-secondary));
}
.xwui-dashboard-kpi-trend {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}
.xwui-dashboard-kpi-trend-up   { color: var(--status-success, #228b22); }
.xwui-dashboard-kpi-trend-down { color: var(--status-danger,  #dc2626); }

/* ── Widget grid ──────────────────────────────────────────────────────────
   N-up on desktop, single-col on tablet+phone. Spans honour widgetColumns. */
.xwui-dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(var(--xwui-dashboard-widget-cols, 2), minmax(0, 1fr));
    gap: var(--xwui-dashboard-gap, var(--spacing-md, 1rem));
}
@media (max-width: 1023px) {
    .xwui-dashboard-widgets { grid-template-columns: 1fr; }
}

.xwui-dashboard-widget-cell {
    min-width: 0;
    min-height: 200px;
    display: flex;
}
.xwui-dashboard-widget-cell > * {
    flex: 1 1 auto;
    min-width: 0;
}
.xwui-dashboard-widget-cell-span-2 { grid-column: span 2; }
.xwui-dashboard-widget-cell-span-3 { grid-column: span 3; }
.xwui-dashboard-widget-cell-full   { grid-column: 1 / -1; }
@media (max-width: 1023px) {
    .xwui-dashboard-widget-cell-span-2,
    .xwui-dashboard-widget-cell-span-3,
    .xwui-dashboard-widget-cell-full { grid-column: 1 / -1; }
}

.xwui-dashboard-widget-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 160px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

/* ── Extra section slot ───────────────────────────────────────────────────*/
.xwui-dashboard-extra {
    box-sizing: border-box;
}

/* ── Reduced motion ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .xwui-dashboard,
    .xwui-dashboard * {
        transition: none !important;
    }
}

/* power/XWUIDashboardWidget/XWUIDashboardWidget.css */
/**
 * XWUIDashboardWidget — universal dashboard tile.
 */

.xwui-dashboard-widget {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated, var(--bg-primary, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.05));
    overflow: hidden;
    min-height: 8rem;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.15s;
    position: relative;
}
.xwui-dashboard-widget:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(16, 24, 40, 0.08));
}

.xwui-dashboard-widget-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--spacing-md, 1rem);
    background: transparent;
    color: var(--text-primary);
}
.xwui-dashboard-widget-divided .xwui-dashboard-widget-header {
    border-bottom: 1px solid var(--border-light, var(--border-color));
}

.xwui-dashboard-widget-handle {
    color: var(--text-tertiary);
    cursor: grab;
    padding: 4px;
    margin: -4px;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.xwui-dashboard-widget:hover .xwui-dashboard-widget-handle { opacity: 1; }
.xwui-dashboard-widget-handle:hover { background: var(--bg-hover); color: var(--text-secondary); }
.xwui-dashboard-widget-handle:active { cursor: grabbing; }
.xwui-dashboard-widget-handle svg { width: 16px; height: 16px; display: block; }

.xwui-dashboard-widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm, 6px);
    background: color-mix(in srgb, var(--accent-primary, #2e90fa) 15%, transparent);
    color: var(--accent-primary, #2e90fa);
    flex-shrink: 0;
}
.xwui-dashboard-widget-icon svg { width: 1rem; height: 1rem; }

.xwui-dashboard-widget-title-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.xwui-dashboard-widget-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.xwui-dashboard-widget-subtitle {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.xwui-dashboard-widget-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 0.5rem;
    flex-shrink: 0;
}
.xwui-dashboard-widget-kpi-value {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary);
    line-height: 1;
}
.xwui-dashboard-widget-kpi-delta {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold, 600);
    margin-top: 2px;
}
.xwui-dashboard-widget-kpi-delta-up { color: var(--role-success-fg, #067647); }
.xwui-dashboard-widget-kpi-delta-down { color: var(--role-danger-fg, #b42318); }

.xwui-dashboard-widget-health { flex-shrink: 0; }

.xwui-dashboard-widget-actions { display: inline-flex; gap: 0.25rem; flex-shrink: 0; }

.xwui-dashboard-widget-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.xwui-dashboard-widget-action:hover { background: var(--bg-hover); color: var(--text-primary); }
.xwui-dashboard-widget-action-primary {
    background: var(--accent-primary, #2e90fa);
    color: #fff;
    border-color: var(--accent-primary, #2e90fa);
}
.xwui-dashboard-widget-action-primary:hover {
    background: color-mix(in srgb, var(--accent-primary, #2e90fa) 88%, #000);
    color: #fff;
}
.xwui-dashboard-widget-action-icon { display: inline-flex; align-items: center; }
.xwui-dashboard-widget-action-icon svg { width: 0.85em; height: 0.85em; display: block; }

.xwui-dashboard-widget-more {
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    flex-shrink: 0;
}
.xwui-dashboard-widget-more:hover { background: var(--bg-hover); color: var(--text-primary); }
.xwui-dashboard-widget-more svg { width: 16px; height: 16px; display: block; }

.xwui-dashboard-widget-body {
    flex: 1;
    padding: var(--spacing-md, 1rem);
    overflow: auto;
    color: var(--text-primary);
    min-height: 0;
}
.xwui-dashboard-widget-body-no-scroll { overflow: hidden; }

.xwui-dashboard-widget-footer {
    padding: 0.5rem var(--spacing-md, 1rem);
    border-top: 1px solid var(--border-light, var(--border-color));
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* Loading skeleton */
.xwui-dashboard-widget-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.xwui-dashboard-widget-skeleton span {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-primary) 6%, transparent) 0%,
        color-mix(in srgb, var(--text-primary) 14%, transparent) 50%,
        color-mix(in srgb, var(--text-primary) 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: xwui-dashboard-widget-shimmer 1.4s ease-in-out infinite;
}
.xwui-dashboard-widget-skeleton span:nth-child(1) { width: 70%; }
.xwui-dashboard-widget-skeleton span:nth-child(2) { width: 90%; }
.xwui-dashboard-widget-skeleton span:nth-child(3) { width: 55%; }
@keyframes xwui-dashboard-widget-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Compact density */
.xwui-dashboard-widget-compact .xwui-dashboard-widget-header { padding: 0.5rem 0.75rem; }
.xwui-dashboard-widget-compact .xwui-dashboard-widget-body { padding: 0.5rem 0.75rem; }
.xwui-dashboard-widget-compact .xwui-dashboard-widget-title { font-size: 0.8125rem; }
.xwui-dashboard-widget-compact .xwui-dashboard-widget-kpi-value { font-size: 1rem; }

/* power/XWUIDataGrid/XWUIDataGrid.css */
/**
 * XWUIDataGrid Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/table/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-datagrid-wrapper {
    width: 100%;
    overflow-x: auto;
}

.xwui-datagrid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}

/* Size variants */
.xwui-datagrid-small {
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-datagrid-small .xwui-datagrid-header,
.xwui-datagrid-small .xwui-datagrid-cell {
    padding: var(--spacing-sm, 0.5rem);
}

.xwui-datagrid-medium .xwui-datagrid-header,
.xwui-datagrid-medium .xwui-datagrid-cell {
    padding: var(--spacing-sm, 0.75rem);
}

.xwui-datagrid-large {
    font-size: var(--font-size-base, 0.9375rem);
}

.xwui-datagrid-large .xwui-datagrid-header,
.xwui-datagrid-large .xwui-datagrid-cell {
    padding: 1rem;
}

/* Bordered */
.xwui-datagrid-bordered .xwui-datagrid-header,
.xwui-datagrid-bordered .xwui-datagrid-cell {
    border: var(--border-table-width, var(--border-width-regular, 1.5px)) var(--border-table-style, solid) var(--border-table-color, var(--border-color));
}

/* Striped */
.xwui-datagrid-striped .xwui-datagrid-row:nth-child(even) {
    background: var(--bg-secondary);
}

/* Hoverable */
.xwui-datagrid-hoverable .xwui-datagrid-row:hover {
    background: var(--bg-secondary);
}

/* Header */
.xwui-datagrid-header {
    font-weight: var(--font-weight-semibold, 600);
    text-align: left;
    background: var(--bg-secondary);
}

.xwui-datagrid-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-datagrid-header-sortable {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}

.xwui-datagrid-header-sortable:hover {
    opacity: 0.8;
}

.xwui-datagrid-sort-icon {
    font-size: var(--font-size-xs, 0.75rem);
    margin-left: 0.25rem;
}

/* Row */
.xwui-datagrid-row-selected {
    background: var(--bg-active, rgba(79, 70, 229, 0.1));
}

/* Cell */
.xwui-datagrid-cell {
    vertical-align: top;
}

/* Select */
.xwui-datagrid-select-header,
.xwui-datagrid-select-cell {
    width: 40px;
    text-align: center;
}

/* Pagination */
.xwui-datagrid-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
}

.xwui-datagrid-pagination-button {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-table-width, var(--border-width-regular, 1.5px)) var(--border-table-style, solid) var(--border-table-color, var(--border-color));
    background: var(--bg-primary);
    border-radius: var(--radius-button, var(--radius-sm, 6px));
    cursor: pointer;
    transition: all 0.2s;
}

.xwui-datagrid-pagination-button:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.xwui-datagrid-pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-datagrid-pagination-info {
    font-size: var(--font-size-sm, 0.875rem);
}


/* power/XWUIDebugToolbar/XWUIDebugToolbar.css */
/**
 * XWUIDebugToolbar Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-debug-toolbar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.xwui-debug-toolbar {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bg-primary, #ffffff);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
}

/* Toolbar Controls */
.xwui-debug-toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-sm, 0.75rem);
    border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f8f9fa);
}

/* Panels */
.xwui-debug-toolbar-panels {
    flex: 1;
    display: flex;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-sm, 0.75rem);
    overflow: auto;
}

.xwui-debug-toolbar-panel {
    flex: 1;
    min-width: 200px;
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    padding: var(--spacing-sm, 0.75rem);
    background: var(--bg-primary, #ffffff);
}

.xwui-debug-toolbar-panel h4 {
    margin: 0 0 var(--spacing-sm, 0.75rem) 0;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
}

/* Breakpoints */
.xwui-debug-breakpoints-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xwui-debug-breakpoint {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-xs, 0.5rem);
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: background 0.2s ease;
}

.xwui-debug-breakpoint:hover {
    background: var(--bg-hover, #f8f9fa);
}

.xwui-debug-breakpoint.enabled {
    color: var(--text-primary, #212529);
}

.xwui-debug-breakpoint.disabled {
    color: var(--text-secondary, #6c757d);
    opacity: 0.6;
}

.xwui-debug-breakpoint-toggle {
    font-size: var(--font-size-base, 1rem);
    width: 1.5rem;
    text-align: center;
}

.xwui-debug-breakpoint-info {
    flex: 1;
    font-family: var(--font-family-mono, 'Courier New', monospace);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-debug-breakpoint-condition {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
    font-style: italic;
}

/* Variables */
.xwui-debug-variables-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-debug-variables-table th {
    text-align: left;
    padding: var(--spacing-xs, 0.5rem);
    border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
}

.xwui-debug-variables-table td {
    padding: var(--spacing-xs, 0.5rem);
    border-bottom: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    color: var(--text-primary, #212529);
}

.xwui-debug-variables-table tr:hover {
    background: var(--bg-hover, #f8f9fa);
}

/* Call Stack */
.xwui-debug-callstack-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xwui-debug-callstack-frame {
    padding: var(--spacing-xs, 0.5rem);
    border-bottom: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    cursor: pointer;
    transition: background 0.2s ease;
}

.xwui-debug-callstack-frame:hover {
    background: var(--bg-hover, #f8f9fa);
}

.xwui-debug-callstack-frame.active {
    background: var(--bg-secondary, #f8f9fa);
    border-left: var(--border-width-regular, 3px) solid var(--accent-primary, #4f46e5);
    padding-left: calc(var(--spacing-xs, 0.5rem) - 3px);
}

.xwui-debug-callstack-function {
    display: block;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-debug-callstack-location {
    display: block;
    font-family: var(--font-family-mono, 'Courier New', monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
}

/* Empty state */
.xwui-debug-empty {
    padding: var(--spacing-md, 1rem);
    text-align: center;
    color: var(--text-secondary, #6c757d);
    font-size: var(--font-size-sm, 0.875rem);
    margin: 0;
}


/* power/XWUIDiffEditor/XWUIDiffEditor.css */
/**
 * XWUIDiffEditor Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-diff-editor-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.xwui-diff-editor {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bg-primary, #ffffff);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
}

/* Toolbar */
.xwui-diff-editor-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-sm, 0.75rem);
    border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-diff-editor-filenames {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    flex: 1;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-diff-editor-file-original {
    color: var(--text-primary, #212529);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-diff-editor-separator {
    color: var(--text-secondary, #6c757d);
}

.xwui-diff-editor-file-modified {
    color: var(--text-primary, #212529);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-diff-editor-toolbar-btn {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: all 0.2s ease;
}

.xwui-diff-editor-toolbar-btn:hover {
    background: var(--bg-hover, #f8f9fa);
    border-color: var(--border-medium, #ced4da);
}

/* Editor Container */
.xwui-diff-editor-container {
    flex: 1;
    overflow: hidden;
    display: flex;
}

/* Side-by-side mode */
.xwui-diff-editor-side-by-side {
    flex-direction: row;
}

.xwui-diff-editor-left,
.xwui-diff-editor-right {
    flex: 1;
    overflow: auto;
    border-right: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
}

.xwui-diff-editor-right {
    border-right: none;
}

/* Inline mode */
.xwui-diff-editor-inline {
    flex: 1;
    overflow: auto;
    font-family: var(--font-family-mono, 'Courier New', monospace);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
}

/* Simple diff lines */
.xwui-diff-line {
    display: flex;
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    border-left: var(--border-width-thin, 2px) solid transparent;
}

.xwui-diff-line-number {
    min-width: 3rem;
    padding-right: var(--spacing-xs, 0.5rem);
    color: var(--text-secondary, #6c757d);
    text-align: right;
    user-select: none;
}

.xwui-diff-line-content {
    flex: 1;
    white-space: pre;
    word-break: break-all;
}

.xwui-diff-line-original {
    background: var(--bg-primary, #ffffff);
}

.xwui-diff-line-modified {
    background: var(--bg-primary, #ffffff);
}

.xwui-diff-line-same {
    background: var(--bg-primary, #ffffff);
}

.xwui-diff-line-removed {
    background: var(--color-diff-removed-bg, rgba(239, 68, 68, 0.1));
    border-left-color: var(--color-diff-removed-border, rgba(239, 68, 68, 0.5));
}

.xwui-diff-line-added {
    background: var(--color-diff-added-bg, rgba(34, 197, 94, 0.1));
    border-left-color: var(--color-diff-added-border, rgba(34, 197, 94, 0.5));
}


/* power/XWUIDynamicFieldRenderer/XWUIDynamicFieldRenderer.css */
/**
 * XWUIDynamicFieldRenderer Component Styles
 */

.xwui-dynamic-field-renderer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
}

.xwui-dynamic-field-renderer-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-dynamic-field-renderer-component {
    width: 100%;
}

.xwui-dynamic-field-renderer-error {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--accent-error, #ef4444);
    margin-top: var(--spacing-xs, 0.25rem);
}

.xwui-dynamic-field-renderer-field[data-field-id] .xwui-dynamic-field-renderer-component {
    width: 100%;
}


/* power/XWUIInputRichTextEditor/XWUIInputRichTextEditor.css */
/**
 * XWUIInputRichTextEditor Component Styles
 */

.xwui-input-rich-text-editor-container {
    /* Container has no specific styles */
}

.xwui-input-rich-text-editor {
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
}

.xwui-input-rich-text-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
    padding: var(--spacing-sm, 8px);
    border-bottom: 1px solid var(--border-light, #e8e8e8);
    background-color: var(--bg-secondary, #fafafa);
}

/* Icon buttons: square, borderless until hover — the glyph is an XWUIIcon. */
.xwui-input-rich-text-editor-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.xwui-input-rich-text-editor-toolbar-btn:hover {
    background-color: var(--bg-hover, #f5f5f5);
    border-color: var(--border-color, #d9d9d9);
    color: var(--accent-primary);
}
.xwui-input-rich-text-editor-toolbar-btn.is-active {
    background-color: var(--accent-primary-light, rgba(79, 70, 229, 0.12));
    color: var(--accent-primary);
}

/* Group separator between toolbar sections. */
.xwui-input-rich-text-editor-toolbar-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.15rem 0.3rem;
    background: var(--border-color, #d9d9d9);
}

.xwui-input-rich-text-editor-content {
    min-height: 200px;
    padding: 12px;
    outline: none;
}

.xwui-input-rich-text-editor-content[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary, #bfbfbf);
}

.xwui-input-rich-text-editor-content[contenteditable="false"] {
    background-color: var(--bg-secondary, #f5f5f5);
    cursor: not-allowed;
}

/* ── Dropdown trigger (font family / size / spacing / line height) ────────── */
/* Wrapper anchors the absolutely-positioned menu under its trigger. */
.xwui-input-rich-text-editor-toolbar-dd-wrap {
    position: relative;
    display: inline-flex;
}

/* Wider-than-square button: glyph (optional) + label + chevron. */
.xwui-input-rich-text-editor-toolbar-dd {
    width: auto;
    gap: 0.25rem;
    padding: 0 0.4rem;
}

.xwui-input-rich-text-editor-toolbar-dd-label {
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Self-contained menu (dropdowns + overflow) ──────────────────────────── */
.xwui-rte-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 50;
    min-width: 8rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: var(--spacing-xs, 4px);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Overflow menu anchors to the right edge so it stays on-screen near the "…". */
.xwui-rte-overflow-menu {
    left: auto;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
    min-width: 12rem;
    max-width: 18rem;
}

.xwui-rte-menu-item {
    display: block;
    width: 100%;
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-primary, #1f1f1f);
    text-align: left;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.xwui-rte-menu-item:hover {
    background-color: var(--bg-hover, #f5f5f5);
    color: var(--accent-primary);
}

/* ── Color swatch (font color / highlight) ───────────────────────────────── */
/* The <label> reuses the toolbar-btn look; the underline strip exposes the
   current colour via --xwui-rte-swatch (set inline from the <input value>). */
.xwui-rte-color {
    position: relative;
}

.xwui-rte-color::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.2rem;
    height: 3px;
    border-radius: 2px;
    background: var(--xwui-rte-swatch, currentColor);
}

/* Native color input fills the swatch so the whole button is the hit target,
   but stays visually hidden (we render our own glyph + strip). */
.xwui-rte-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ── Overflow "…" button ─────────────────────────────────────────────────── */
.xwui-rte-overflow {
    margin-left: auto; /* push the more button to the trailing edge */
}

/* ── Inserted tables ─────────────────────────────────────────────────────── */
.xwui-input-rich-text-editor .xwui-rte-table {
    border-collapse: collapse;
    margin: 0.5rem 0;
    width: auto;
}

.xwui-input-rich-text-editor .xwui-rte-table td,
.xwui-input-rich-text-editor .xwui-rte-table th {
    min-width: 3rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color, #d9d9d9);
    vertical-align: top;
}


/* power/XWUIItemBrowser/XWUIItemBrowser.css */
/**
 * XWUIItemBrowser Component Styles
 * Layout shell only — composed components supply their own tokens.
 */

.xwui-item-browser {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    width: 100%;
    min-height: 0;
    height: 100%;
}

/* Toolbar */
.xwui-item-browser-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    flex-shrink: 0;
}

.xwui-item-browser-toolbar-switcher {
    flex: 0 1 auto;
}

.xwui-item-browser-toolbar-menus {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-item-browser-menu-trigger {
    display: inline-flex;
}

.xwui-item-browser-toolbar-sizes {
    flex: 0 1 auto;
    margin-inline-start: auto;
}

/* XWUIShell body host — fills remaining height below toolbar */
.xwui-item-browser-body {
    flex: 1 1 auto;
    width: 100%;
    min-height: 12rem;
    min-width: 0;
}

.xwui-item-browser-shell-host {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.xwui-item-browser-shell {
    min-height: inherit;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

/* Pane surfaces inside shell parts */
.xwui-item-browser-nav,
.xwui-item-browser-main,
.xwui-item-browser-side {
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--bg-elevated, #fff);
    overflow: auto;
}

.xwui-item-browser-nav tr.is-nav-selected,
.xwui-item-browser-nav .xwui-treetable tr.is-row-selected {
    background: var(--bg-hover, rgba(99, 102, 241, 0.08));
}

.xwui-item-browser-nav tr[data-id] {
    cursor: pointer;
}

.xwui-item-browser-side {
    padding: var(--spacing-sm, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-item-browser-side-preview img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
}

.xwui-item-browser-side-preview--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg, 1.5rem);
    color: var(--accent-primary, #6366f1);
    background: var(--bg-secondary, #f9fafb);
    border-radius: var(--radius-sm, 6px);
}

.xwui-item-browser-side-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-item-browser-side-thumb {
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    aspect-ratio: 1;
}

.xwui-item-browser-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xwui-item-browser-side-thumb:hover {
    outline: 2px solid var(--accent-primary, #6366f1);
    outline-offset: 1px;
}

.xwui-item-browser-breadcrumb-root {
    font-weight: 600;
}

.xwui-item-browser-side-empty {
    padding: var(--spacing-md, 1rem);
    color: var(--text-tertiary, #9ca3af);
    font-size: var(--font-size-sm, 0.875rem);
    text-align: center;
}

.xwui-item-browser-main {
    padding: var(--spacing-xs, 0.25rem);
}

.xwui-item-browser--compact .xwui-item-browser-main {
    padding: var(--spacing-xxs, 0.125rem);
}

.xwui-item-browser--sheet .xwui-item-browser-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.xwui-item-browser-sheet-host {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.xwui-item-browser-sheet-host .xwui-spreadsheet-container,
.xwui-item-browser-sheet-host .xwui-spreadsheet {
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
}

/* Narrow: floating panes use full overlay width */
.xwui-item-browser-shell--narrow {
    --xwui-shell-part-floating-w: min(88vw, 20rem);
}

.xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid {
    display: grid;
    grid-template-columns: repeat(var(--item-browser-grid-cols, 4), minmax(0, 1fr));
    gap: var(--spacing-sm, 0.5rem);
    align-content: start;
}

.xwui-item-browser--size-4xs .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid,
.xwui-item-browser--size-3xs .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid,
.xwui-item-browser--size-2xs .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid,
.xwui-item-browser--size-xs .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid,
.xwui-item-browser--size-s .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid {
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-item-browser--size-m .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid {
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-item-browser--size-l .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid {
    gap: var(--spacing-sm, 0.625rem);
}

.xwui-item-browser--size-xl .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid,
.xwui-item-browser--size-2xl .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid,
.xwui-item-browser--size-3xl .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid,
.xwui-item-browser--size-4xl .xwui-item-browser-main--icon-grid .xwui-item-browser-icon-grid {
    gap: var(--spacing-md, 0.75rem);
}

.xwui-item-browser-main--icon-grid .xwui-item-group-item {
    width: auto;
}

.xwui-item-browser-main .xwui-treetable tbody tr[data-id] {
    cursor: pointer;
}

.xwui-item-browser-main .xwui-treetable tbody tr.is-row-selected {
    background: var(--bg-hover, rgba(99, 102, 241, 0.08));
}

.xwui-item-browser-main .xwui-table tbody tr.is-row-selected {
    background: var(--bg-hover, rgba(99, 102, 241, 0.08));
}

/* Preset-specific surfaces */
.xwui-item-browser-toolbar-title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    flex: 0 0 auto;
    margin-inline-end: var(--spacing-sm, 0.5rem);
}

.xwui-item-browser-toolbar-up,
.xwui-item-browser-toolbar-home {
    flex: 0 0 auto;
}

.xwui-item-browser-toolbar-selection {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--accent-primary, #6366f1);
    background: var(--bg-hover, rgba(99, 102, 241, 0.08));
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm, 6px);
    flex: 0 0 auto;
}

.xwui-item-browser-toolbar-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-tertiary, #9ca3af);
    flex: 1 1 auto;
    min-width: 0;
}

.xwui-item-browser-breadcrumb-sep {
    opacity: 0.6;
    user-select: none;
}

.xwui-item-browser-breadcrumb-segment {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent-primary, #6366f1);
    cursor: pointer;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xwui-item-browser-breadcrumb-segment:hover {
    text-decoration: underline;
}

.xwui-item-browser-toolbar-search {
    flex: 1 1 12rem;
    min-width: 8rem;
    max-width: 16rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-item-browser-toolbar-search-count {
    flex-shrink: 0;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--accent-primary, #6366f1);
    background: var(--bg-hover, rgba(99, 102, 241, 0.08));
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm, 6px);
    min-width: 1.25rem;
    text-align: center;
}

.xwui-item-browser-search-input {
    width: 100%;
    padding: 0.35rem 0.6rem;
    font-size: var(--font-size-sm, 0.875rem);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-elevated, #fff);
    color: inherit;
}

.xwui-item-browser-toolbar-shell-toggles {
    display: none;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-item-browser--narrow .xwui-item-browser-toolbar-shell-toggles {
    display: flex;
}

.xwui-item-browser-main .xwui-card.is-item-active,
.xwui-item-browser-main .xwui-imagelist-item.is-item-active {
    outline: 2px solid var(--accent-primary, #6366f1);
    outline-offset: 2px;
}

.xwui-item-browser-gallery--poster .xwui-imagelist-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.xwui-item-browser-gallery--poster .xwui-imagelist-item {
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.xwui-item-browser-main .xwui-card {
    cursor: pointer;
}

/* Catalog — indexed card grid (XWUIBox + XWUICard) */
.xwui-item-browser-catalog-index {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xl, 2rem);
    width: 100%;
    box-sizing: border-box;
}

.xwui-item-browser-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg, 1.5rem);
}

.xwui-item-browser-catalog-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-md, 1rem);
}

.xwui-item-browser-catalog-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: var(--radius-container, 12px);
    color: var(--accent-primary, #6366f1);
}

.xwui-item-browser-catalog-card-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.xwui-item-browser-catalog-card-heading {
    flex: 1;
    min-width: 0;
}

.xwui-item-browser-catalog-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin: 0 0 var(--spacing-xs, 0.25rem) 0;
}

.xwui-item-browser-catalog-card-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    margin: 0;
}

.xwui-item-browser-catalog-card-desc {
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm, 0.5rem);
    line-height: 1.45;
}

.xwui-item-browser-catalog-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
    margin-top: var(--spacing-sm, 0.5rem);
}

.xwui-item-browser-catalog-action-wrap .xwui-item-browser-catalog-action {
    border-radius: 999px;
    min-height: 26px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.xwui-item-browser-catalog-grid .xwui-card-footer-tags {
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-item-browser-catalog-grid .xwui-card-footer-tags .xwui-tag,
.xwui-item-browser-catalog-grid .xwui-card-footer-tags .xwui-tag-label {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    line-height: 1.3;
}

.xwui-item-browser-catalog-grid .xwui-card-footer-tags .xwui-tag {
    min-height: auto;
}

/* Empty state */
.xwui-item-browser--control-panel .xwui-item-browser-main {
    --accent-primary: #107c10;
}

.xwui-item-browser--control-panel .xwui-item-browser-main [class*="primary"] {
    color: #107c10;
}

.xwui-item-browser--explorer-tiles .xwui-item-browser-main {
    background: var(--bg-base, #1a1a1a);
}

.xwui-item-browser--explorer-tiles .xwui-item-browser-main,
.xwui-item-browser--explorer-tiles .xwui-item-browser-nav {
    color: var(--text-primary, #f3f4f6);
}

.xwui-item-browser-empty {
    padding: var(--spacing-xl, 2rem);
    text-align: center;
    color: var(--text-tertiary, #9ca3af);
    font-size: var(--font-size-sm, 0.875rem);
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-item-browser-empty-message {
    margin: 0;
}

.xwui-item-browser-empty-clear {
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-elevated, #fff);
    color: var(--accent-primary, #6366f1);
    font-size: var(--font-size-sm, 0.875rem);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}

.xwui-item-browser-empty-clear:hover {
    background: var(--bg-hover, rgba(99, 102, 241, 0.08));
}

/* power/XWUIItemGroup/XWUIItemGroup.css */
/**
 * XWUIItemGroup Component Styles
 * Container for multiple XWUIItems that handles lists/trees of items
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-item-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-item-group-ltr {
    direction: ltr;
}

.xwui-item-group-rtl {
    direction: rtl;
}

.xwui-item-group-item {
    width: 100%;
    min-width: 0;
}

.xwui-item-group.xwui-item-group--grid {
    display: grid;
    flex-direction: unset;
    gap: var(--xwui-item-group-gap, var(--spacing-md, 1rem));
    align-content: start;
    width: 100%;
}

.xwui-item-group.xwui-item-group--grid:not(.xwui-item-group--axis-h) {
    grid-template-columns: repeat(var(--xwui-item-group-cols, 1), minmax(0, 1fr));
}

.xwui-item-group.xwui-item-group--grid.xwui-item-group--axis-h {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--xwui-item-group-cols, 1), auto);
    grid-template-columns: unset;
}

.xwui-item-group.xwui-item-group--grid.xwui-item-group--flow-column:not(.xwui-item-group--axis-h) {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--xwui-item-group-rows, 1), auto);
}

.xwui-item-group.xwui-item-group--grid.xwui-item-group--flow-row:not(.xwui-item-group--axis-h) {
    grid-auto-flow: row;
}

.xwui-item-group.xwui-item-group--grid.xwui-item-group--flow-column.xwui-item-group--flow-dense:not(.xwui-item-group--axis-h) {
    grid-auto-flow: column dense;
}

.xwui-item-group.xwui-item-group--grid.xwui-item-group--flow-row.xwui-item-group--flow-dense:not(.xwui-item-group--axis-h) {
    grid-auto-flow: row dense;
}

.xwui-item-group--inline-grid .xwui-item-group-item {
    width: auto;
}

.xwui-item-nested-group {
    margin-left: var(--spacing-md, 1rem);
    margin-top: var(--spacing-xs, 0.25rem);
}

.xwui-item-group-rtl .xwui-item-nested-group {
    margin-left: 0;
    margin-right: var(--spacing-md, 1rem);
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* power/XWUIKPIStrip/XWUIKPIStrip.css */
/**
 * XWUIKPIStrip — horizontal strip of KPI tiles.
 */

.xwui-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min-w, 180px), 1fr));
    gap: 12px;
    width: 100%;
}

.xwui-kpi-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--bg-elevated, var(--bg-primary, #fff));
    border: 1px solid var(--border-light, var(--border-color));
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary);
    text-align: left;
    cursor: default;
    font-family: inherit;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
button.xwui-kpi-tile {
    cursor: pointer;
}
button.xwui-kpi-tile:hover {
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent-primary, #2e90fa) 40%, var(--border-color));
}
.xwui-kpi-strip-flat .xwui-kpi-tile {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-light, var(--border-color));
    border-radius: 0;
    padding: 8px 0;
}

.xwui-kpi-tile-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xwui-kpi-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--accent-primary, #2e90fa);
    flex-shrink: 0;
}
.xwui-kpi-tile-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}
.xwui-kpi-tile-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-kpi-tile-value {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.xwui-kpi-tile-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}
.xwui-kpi-tile-delta {
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-kpi-tile-delta-up { color: var(--role-success-fg, #067647); }
.xwui-kpi-tile-delta-down { color: var(--role-danger-fg, #b42318); }

/* Sizes */
.xwui-kpi-strip-xs .xwui-kpi-tile { padding: 6px 8px; }
.xwui-kpi-strip-xs .xwui-kpi-tile-value { font-size: 0.875rem; }
:is(.xwui-kpi-strip-s,.xwui-kpi-strip-sm) .xwui-kpi-tile-value { font-size: 1rem; }
:is(.xwui-kpi-strip-m,.xwui-kpi-strip-md) .xwui-kpi-tile-value { font-size: 1.25rem; }
:is(.xwui-kpi-strip-l,.xwui-kpi-strip-lg) .xwui-kpi-tile { padding: 16px 18px; }
:is(.xwui-kpi-strip-l,.xwui-kpi-strip-lg) .xwui-kpi-tile-value { font-size: 1.5rem; }

/* power/XWUILayoutBlocks/XWUILayoutBlocks.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* power/XWUILayoutCards/XWUILayoutCards.css */
/* Styles for XWUILayoutCards.
   The base grid comes from XWUIGrid; these rules only layer orientation
   tweaks. Horizontal is the default (grid). Vertical forces a single column
   and a tighter gap so stacks read as one connected list.
*/

.xwui-layout-cards--v .xwui-layout-cards-grid--v {
  grid-template-columns: 1fr;
}

.xwui-layout-cards--v .xwui-layout-cards-grid--v > * {
  /* Avoid orphan min-width from nested XWUICard defaults when stacked. */
  min-width: 0;
}

@media (max-width: 640px) {
  /* Horizontal layouts collapse to a single column on small viewports,
     matching the vertical behavior so the component is responsive by default. */
  .xwui-layout-cards--h .xwui-layout-cards-grid--h {
    grid-template-columns: 1fr;
  }
}

/* power/XWUILayoutFilterPanel/XWUILayoutFilterPanel.css */
/* Styles for XWUILayoutFilterPanel. */

/* power/XWUILayoutFloatingMenu/XWUILayoutFloatingMenu.css */
/* Styles for XWUILayoutFloatingMenu. */

/* power/XWUILayoutFooter/XWUILayoutFooter.css */
/* Styles for XWUILayoutFooter. */

/* power/XWUILayoutGrid/XWUILayoutGrid.css */
/* Styles for XWUILayoutGrid. */

/* power/XWUILayoutHeader/XWUILayoutHeader.css */
/* Styles for XWUILayoutHeader. */

/* power/XWUILayoutListView/XWUILayoutListView.css */
/* Styles for XWUILayoutListView. */

/* power/XWUILayoutModals/XWUILayoutModals.css */
/* Styles for XWUILayoutModals. */

/* power/XWUILayoutNavBar/XWUILayoutNavBar.css */
/* Styles for XWUILayoutNavBar. */

/* power/XWUILayoutNotification/XWUILayoutNotification.css */
/* Styles for XWUILayoutNotification. */

/* power/XWUILayoutPagination/XWUILayoutPagination.css */
/* Styles for XWUILayoutPagination. */

/* power/XWUILayoutRating/XWUILayoutRating.css */
/* Styles for XWUILayoutRating. */

/* power/XWUILayoutSearch/XWUILayoutSearch.css */
/* Styles for XWUILayoutSearch. */

/* power/XWUILayoutSidebar/XWUILayoutSidebar.css */
/* Styles for XWUILayoutSidebar. */

/* power/XWUILayoutStatistics/XWUILayoutStatistics.css */
/* Styles for XWUILayoutStatistics. */

/* power/XWUILayoutTileView/XWUILayoutTileView.css */
/* Styles for XWUILayoutTileView. */

/* power/XWUILocale/XWUILocale.css */
/* XWUILocale — controller component, no visible chrome of its own.
 * The host element is hidden via inline style at construction time;
 * this stylesheet exists only so the build pipeline (which auto-loads
 * <Component>.css for every registered tag) finds the expected file.
 *
 * RTL plumbing for the rest of xwui already lives in
 * src/styles/base/typography-international.css (logical-property CSS
 * variables + [dir="rtl"] overrides), so flipping <html dir> via the
 * controller is enough to retag every dependent surface. */

xwui-locale {
    display: none !important;
}

/* power/XWUIPageView/XWUIPageView.css */
/* src/components/power/XWUIPageView/XWUIPageView.css */
/* Layout only — the rendered content (markdown / form / code / sandbox) carries
   its own component styles. The root has no background so it inherits the host. */

.xwui-page-view {
  display: block;
  inline-size: 100%;
}

.xwui-page-view-content {
  display: block;
  inline-size: 100%;
}

/* Each renderer mounts into a typed wrapper so apps can target a format. */
.xwui-page-view-md,
.xwui-page-view-html,
.xwui-page-view-form,
.xwui-page-view-json,
.xwui-page-view-run {
  display: block;
  inline-size: 100%;
}

/* Sandbox iframe — host sizes height from the bridge 'resize' message; a min
   keeps it visible before the first report. */
.xwui-page-view-sandbox-frame {
  display: block;
  inline-size: 100%;
  min-block-size: 2rem;
  border: 0;
  background: transparent;
}

.xwui-page-view-error {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--color-danger-bg, #fef2f2);
  color: var(--color-danger-fg, #991b1b);
  border: 1px solid var(--color-danger-border, #fecaca);
  font: 0.85rem/1.5 var(--font-family-mono, ui-monospace, monospace);
  white-space: pre-wrap;
}

/* power/XWUIPreviewer/XWUIPreviewer.css */
/**
 * XWUIPreviewer Component Styles
 * Layout: [Left: Preview|Code] [Center: Platform + Rotate] [Right: Theme]
 */

.xwui-previewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Fill the host vertically when the host has a definite height; otherwise
     fall back to the 320px minimum. Without `height:100%`, the previewer
     was collapsing to just `min-height` inside hosts that didn't set their
     own height — making the iframe area visibly cramped on debug pages. */
  height: 100%;
  min-height: 320px;
  border: var(--border-width-regular, 1px) solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--bg-primary, #fff);
}

/* ===== TOOLBAR ===== */
.xwui-previewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md, 0.75rem);
  padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 1rem);
  border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
  min-height: 40px;
}

.xwui-previewer-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
}

.xwui-previewer-toolbar-center {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
}

.xwui-previewer-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
}

.xwui-previewer-toolbar-tabs {
  min-width: 0;
  display: flex;
}

.xwui-previewer-toolbar-tabs .xwui-tabs {
  flex: 0 1 auto;
}

/* Only show tab list in toolbar; panels are in .xwui-previewer-content */
.xwui-previewer-toolbar-tabs .xwui-tabs-content {
  display: none;
}

.xwui-previewer-toolbar-group-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-secondary, #64748b);
  margin-right: var(--spacing-xs, 0.25rem);
}

/* Hide labels when labelMode is 'icons' or 'none' */
.xwui-previewer-labels-hidden .xwui-previewer-toolbar-group-label {
  display: none;
}

/* ===== ROTATE BUTTON ===== */
.xwui-previewer-rotate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: none;
  color: var(--text-tertiary, #94a3b8);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.xwui-previewer-rotate-btn:hover {
  color: var(--text-primary, #0f172a);
  background: var(--bg-hover, rgba(0,0,0,0.04));
}

.xwui-previewer-rotate-btn.xwui-previewer-rotate-active {
  color: var(--accent-color, #6366f1);
  background: var(--accent-bg, rgba(99,102,241,0.08));
  border-color: var(--accent-color, #6366f1);
}

/* ===== FULLSCREEN BUTTON ===== */
.xwui-previewer-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: none;
  color: var(--text-tertiary, #94a3b8);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.xwui-previewer-fullscreen-btn:hover {
  color: var(--text-primary, #0f172a);
  background: var(--bg-hover, rgba(0,0,0,0.04));
}

/* ===== CODE MODE TABS ===== */
.xwui-previewer-mode-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
  padding: 0 12px;
  flex-shrink: 0;
}

.xwui-previewer-mode-tab {
  padding: 6px 12px;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-tertiary, #94a3b8);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.xwui-previewer-mode-tab:hover {
  color: var(--text-primary, #0f172a);
}

.xwui-previewer-mode-tab.active {
  color: var(--accent-color, #6366f1);
  border-bottom-color: var(--accent-color, #6366f1);
}

/* ===== CONSOLE ===== */
/* Mini-toolbar above the console body — hosts the Clear button. The
   console panel itself is a column flex container, so this row sits on top
   and the .xwui-previewer-console-wrap below flexes to fill the rest. */
.xwui-previewer-console-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-xs, 6px);
  padding: var(--spacing-xs, 6px) var(--spacing-sm, 10px);
  background: var(--bg-secondary, #f8fafc);
  border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}
.xwui-previewer-console-clear {
  font: inherit;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  padding: 4px 12px;
  border: var(--border-width-regular, 1px) solid var(--border-color, #cbd5e1);
  border-radius: var(--radius-button, 6px);
  background: var(--bg-primary, #fff);
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.xwui-previewer-console-clear:hover {
  color: var(--text-primary, #0f172a);
  background: var(--bg-hover, rgba(0,0,0,0.04));
  border-color: var(--accent-primary, #4f46e5);
}
.xwui-previewer-console-clear:active {
  background: var(--bg-active, rgba(0,0,0,0.08));
}

.xwui-previewer-console-wrap {
  flex: 1;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  background: #1a1a2e;
  padding: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.6;
}

.xwui-previewer-console-entry {
  padding: 2px 12px;
  color: #d4d4d4;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.xwui-previewer-console-error {
  color: #f87171;
}

.xwui-previewer-console-time {
  color: #6b7280;
  margin-right: 8px;
}

.xwui-previewer-console-type {
  font-weight: 600;
  margin-right: 4px;
}

.xwui-previewer-console-wrap:empty::after {
  content: 'No errors';
  display: block;
  padding: 12px;
  color: #4ade80;
  font-size: 12px;
}

/* Console badge on tab */
.xwui-previewer-console-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  background: #ef4444;
  color: #fff;
  line-height: 1;
}

/* ===== CONTENT ===== */
.xwui-previewer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.xwui-previewer-panel {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
}

.xwui-previewer-panel-active {
  display: flex;
}

.xwui-previewer-preview-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-primary, #fff);
  min-height: 280px;
}

.xwui-previewer-preview-frame {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: none;
  border-radius: 0;
  background: var(--bg-primary, #fff);
}

.xwui-previewer-code-wrap {
  flex: 1;
  min-height: 400px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xwui-previewer-code-wrap > * {
  flex: 1 1 auto;
  min-height: 360px;
  min-width: 0;
  max-height: 100%;
}

.xwui-previewer-code-fallback {
  width: 100%;
  min-height: 240px;
  padding: var(--spacing-md, 1rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--font-size-sm, 0.875rem);
  border: none;
  resize: vertical;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #0f172a);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] .xwui-previewer {
  border-color: var(--border-color, #334155);
  background: var(--bg-primary, #0f172a);
}

[data-theme="dark"] .xwui-previewer-toolbar {
  border-color: var(--border-color, #334155);
  background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .xwui-previewer-preview-wrap {
  background: var(--bg-primary, #0f172a);
}

[data-theme="dark"] .xwui-previewer-rotate-btn,
[data-theme="dark"] .xwui-previewer-fullscreen-btn {
  color: var(--text-tertiary, #64748b);
}

[data-theme="dark"] .xwui-previewer-rotate-btn:hover,
[data-theme="dark"] .xwui-previewer-fullscreen-btn:hover {
  color: var(--text-primary, #f1f5f9);
  background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .xwui-previewer-code-fallback {
  background: var(--bg-primary, #0f172a);
  color: var(--text-primary, #f1f5f9);
}

/* ── Device controls group + Maximize (full-page overlay) ──────────────────── */

/* Platform + rotate group: hidden inline unless `showPlatform`; ALWAYS shown
   when the previewer is maximized so the device views are usable full-page. */
.xwui-previewer-device {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.xwui-previewer-device--inline { display: inline-flex; }
.xwui-previewer-maximized .xwui-previewer-device { display: inline-flex; }

.xwui-previewer-maximize-btn.xwui-previewer-maximize-active {
  color: var(--accent, #2563eb);
}

/* Maximized = full-page overlay on top of everything. */
.xwui-previewer.xwui-previewer-maximized {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-app, var(--bg-primary, #ffffff));
  display: flex;
  flex-direction: column;
}
.xwui-previewer-maximized .xwui-previewer-content {
  flex: 1 1 auto;
  min-height: 0;
}
.xwui-previewer-maximized .xwui-previewer-panel-active {
  height: 100%;
}
.xwui-previewer-maximized .xwui-previewer-preview-wrap {
  height: 100%;
}

/* power/XWUIPreviewerXWCode/XWUIPreviewerXWCode.css */
/**
 * XWUIPreviewerXWCode — visual override layer for XWUIPreviewer.
 *
 * XWUIPreviewerXWCode shares all DOM and class names with XWUIPreviewer, so
 * the parent's stylesheet handles every layout, toolbar, panel, and editor
 * rule. We deliberately load a stylesheet of our own (rather than aliasing
 * to the parent's) so that:
 *   1. xwui's CSS auto-loader doesn't 404 looking for `XWUIPreviewerXWCode.css`,
 *   2. integrators have a stable hook for `.xwui-previewer-xwcode-*` overrides
 *      without touching the base component's styles.
 *
 * Pull in the parent at runtime via `@import` so a single `<link>` for this
 * file gives the full visual chain — same idiom as other tier-extending
 * components in xwui.
 */

@import url("../XWUIPreviewer/XWUIPreviewer.css");

/* Marker class — added by future overrides. The host element is the same
   `.xwui-previewer` as the base; XWCode-specific tweaks land here. */
.xwui-previewer-xwcode-host {
  /* reserved for future overrides */
}

/* power/XWUIPropertiesGrid/XWUIPropertiesGrid.css */
/**
 * XWUIPropertiesGrid — dynamic custom fields editor.
 */

.xwui-properties-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-primary);
}
.xwui-properties-grid-empty {
    padding: 1.25rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md, 8px);
}

.xwui-properties-grid-fields {
    display: grid;
    gap: 4px 16px;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
}
.xwui-properties-grid-cols-2 .xwui-properties-grid-fields {
    grid-template-columns: 140px 1fr 24px 140px 1fr 24px;
}
@media (max-width: 720px) {
    .xwui-properties-grid-fields,
    .xwui-properties-grid-cols-2 .xwui-properties-grid-fields { grid-template-columns: 140px 1fr auto; }
}

.xwui-properties-grid-row {
    display: contents;
}
.xwui-properties-grid-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    padding: 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwui-properties-grid-help {
    display: inline-flex;
    color: var(--text-tertiary);
    cursor: help;
}
.xwui-properties-grid-help svg { width: 14px; height: 14px; }

.xwui-properties-grid-value {
    display: flex;
    align-items: center;
    min-width: 0;
}
/* Each cell now hosts an XWUIInput* component (XWUIInputText / Number / Date /
   Select / Checkbox), so the raw .xwui-properties-grid-input visual was removed.
   Sub-components carry their own theming + focus rings. The host just needs
   to give them a flexible container. */
.xwui-properties-grid-value > .xwui-input-text-wrapper,
.xwui-properties-grid-value > .xwui-number-input-wrapper,
.xwui-properties-grid-value > .xwui-input-date-wrapper,
.xwui-properties-grid-value > .xwui-select { width: 100%; }

.xwui-properties-grid-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.xwui-properties-grid-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 7%, transparent));
    color: var(--text-primary);
    border-radius: 999px;
    font-size: 0.75rem;
}
.xwui-properties-grid-tag-x {
    border: 0; background: transparent; cursor: pointer;
    color: var(--text-tertiary);
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    padding: 0;
}
.xwui-properties-grid-tag-x:hover { background: var(--bg-active); color: var(--text-primary); }
.xwui-properties-grid-tag-x svg { width: 9px; height: 9px; display: block; }
.xwui-properties-grid-tag-input {
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text-primary);
    padding: 2px 4px;
    outline: 0;
    flex: 1;
    min-width: 60px;
}

.xwui-properties-grid-person {
    color: var(--text-primary);
    font-size: 0.8125rem;
}
.xwui-properties-grid-person-empty { color: var(--text-tertiary); font-style: italic; }

.xwui-properties-grid-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.xwui-properties-grid-remove:hover { background: var(--bg-active); color: var(--role-danger-fg, #b42318); }
.xwui-properties-grid-remove svg { width: 11px; height: 11px; display: block; }

.xwui-properties-grid-add {
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
}
.xwui-properties-grid-add:hover { color: var(--text-primary); border-style: solid; background: var(--bg-hover); }

/* Sizes */
.xwui-properties-grid-xs { font-size: 0.6875rem; }
:is(.xwui-properties-grid-s,.xwui-properties-grid-sm) { font-size: 0.75rem; }
:is(.xwui-properties-grid-m,.xwui-properties-grid-md) { font-size: 0.8125rem; }
:is(.xwui-properties-grid-l,.xwui-properties-grid-lg) { font-size: 0.9375rem; }

/* power/XWUIResizablePanel/XWUIResizablePanel.css */
/**
 * XWUIResizablePanel Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-resizable-panel {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.xwui-resizable-panel-horizontal {
    flex-direction: row;
}

.xwui-resizable-panel-vertical {
    flex-direction: column;
}

.xwui-resizable-panel-pane {
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

.xwui-resizable-panel-pane-left {
    flex-shrink: 0;
}

.xwui-resizable-panel-pane-right {
    flex-grow: 1;
}

.xwui-resizable-panel-divider {
    flex-shrink: 0;
    background: var(--border-color);
    cursor: col-resize;
    transition: background 0.2s;
}

.xwui-resizable-panel-horizontal .xwui-resizable-panel-divider {
    cursor: col-resize;
}

.xwui-resizable-panel-vertical .xwui-resizable-panel-divider {
    cursor: row-resize;
}

.xwui-resizable-panel-divider:hover {
    background: var(--accent-primary);
}

.xwui-resizable-panel-divider:active {
    background: var(--accent-primary);
}


/* power/XWUIResourceMatrix/XWUIResourceMatrix.css */
/* src/components/power/XWUIResourceMatrix/XWUIResourceMatrix.css
 *
 * XWUIResourceMatrix — Gantt-like rows × time × coloured-pills grid.
 * Theme tokens only; no hardcoded colors (cell pills use inline backgrounds
 * driven by data.statusPalette).
 *
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{theme}.css (MANDATORY)
 */

.xwui-resource-matrix {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    min-width: 0;
}

/* ── Toolbar (prev / range-label / next / today) ──────────────────────────*/
.xwui-resource-matrix-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-xs, 0.25rem) 0;
}
.xwui-resource-matrix-nav-btn,
.xwui-resource-matrix-today-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-sm, 0.25rem);
    border: 1px solid var(--border-container-color, var(--border-color));
    background: var(--surface-primary, var(--bg-color));
    color: var(--text-primary, var(--text-color));
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.xwui-resource-matrix-nav-btn { width: 32px; padding: 0; }
.xwui-resource-matrix-nav-btn:hover,
.xwui-resource-matrix-today-btn:hover {
    border-color: var(--accent-color, currentColor);
    background: var(--surface-secondary, var(--bg-color));
}
.xwui-resource-matrix-range-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, var(--text-color));
    margin-inline: var(--spacing-xs, 0.25rem);
}

/* ── Scroll container + grid ──────────────────────────────────────────────
   The grid scrolls horizontally so wide ranges (e.g. 31-day month, 16+ assets)
   don't break the page layout. */
.xwui-resource-matrix-scroll {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--border-container-color, var(--border-color));
    border-radius: var(--radius-md, 0.5rem);
    background: var(--surface-primary, var(--bg-color));
}
.xwui-resource-matrix-grid {
    display: grid;
    /* grid-template-columns is set inline in JS based on row count */
    grid-auto-rows: var(--xwui-matrix-row-height, 48px);
}

/* Corner + col-header row — first grid row. */
.xwui-resource-matrix-corner {
    height: 32px;
    background: var(--surface-secondary, var(--bg-color));
    border-bottom: 1px solid var(--border-container-color, var(--border-color));
    border-inline-end: 1px solid var(--border-container-color, var(--border-color));
}
.xwui-resource-matrix-col-header,
.xwui-resource-matrix-trailing-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 var(--spacing-xs, 0.25rem);
    background: var(--surface-secondary, var(--bg-color));
    border-bottom: 1px solid var(--border-container-color, var(--border-color));
    border-inline-end: 1px solid var(--border-container-color, var(--border-color));
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Override grid-auto-rows for the header row only. */
.xwui-resource-matrix-grid > .xwui-resource-matrix-corner,
.xwui-resource-matrix-grid > .xwui-resource-matrix-col-header,
.xwui-resource-matrix-grid > .xwui-resource-matrix-trailing-header {
    grid-row: 1;
}

/* Sticky headers — when stickyHeaders is enabled, the header row + the row-
   header column stick to the visible edge of the scroll container. */
.xwui-resource-matrix-sticky > .xwui-resource-matrix-corner,
.xwui-resource-matrix-sticky > .xwui-resource-matrix-col-header,
.xwui-resource-matrix-sticky > .xwui-resource-matrix-trailing-header {
    position: sticky;
    top: 0;
    z-index: 2;
}
.xwui-resource-matrix-sticky > .xwui-resource-matrix-row-header,
.xwui-resource-matrix-sticky > .xwui-resource-matrix-corner {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
}

/* Row header */
.xwui-resource-matrix-row-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    padding: 0 var(--spacing-sm, 0.5rem);
    background: var(--surface-primary, var(--bg-color));
    border-bottom: 1px solid var(--border-container-color, var(--border-color));
    border-inline-end: 1px solid var(--border-container-color, var(--border-color));
    min-width: 0;
}
.xwui-resource-matrix-row-header-clickable {
    cursor: pointer;
    transition: background-color 120ms ease;
}
.xwui-resource-matrix-row-header-clickable:hover {
    background: var(--surface-secondary, rgba(0, 0, 0, 0.04));
}
.xwui-resource-matrix-row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}
.xwui-resource-matrix-row-labels {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.xwui-resource-matrix-row-label-primary {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, var(--text-color));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwui-resource-matrix-row-label-secondary {
    font-size: 0.7rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Intersection cells (empty grid scaffolding) */
.xwui-resource-matrix-cell {
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-container-color-subtle, var(--border-color));
    border-inline-end: 1px solid var(--border-container-color-subtle, var(--border-color));
}

/* Pills — coloured allocation blocks. Backgrounds set inline from palette. */
.xwui-resource-matrix-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--xwui-matrix-row-height, 48px) - 12px);
    margin: 6px 2px;
    padding: 0 var(--spacing-xs, 0.25rem);
    border-radius: var(--radius-sm, 0.25rem);
    background: var(--surface-secondary, rgba(0, 0, 0, 0.08));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
}
.xwui-resource-matrix-pill-clickable {
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
}
.xwui-resource-matrix-pill-clickable:hover {
    filter: brightness(1.08);
}
.xwui-resource-matrix-pill-clickable:focus-visible {
    outline: 2px solid var(--focus-ring-color, var(--accent-color));
    outline-offset: 2px;
}

/* Trailing calculated cells (Work Days / Util % / Total / KM) */
.xwui-resource-matrix-trailing-cell {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-sm, 0.5rem);
    border-bottom: 1px solid var(--border-container-color, var(--border-color));
    border-inline-start: 1px solid var(--border-container-color, var(--border-color));
    font-size: 0.85rem;
    color: var(--text-primary, var(--text-color));
}

/* ── Legend ───────────────────────────────────────────────────────────────*/
.xwui-resource-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    padding: var(--spacing-xs, 0.25rem) 0;
}
.xwui-resource-matrix-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.xwui-resource-matrix-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

/* ── Reduced motion ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .xwui-resource-matrix,
    .xwui-resource-matrix * {
        transition: none !important;
    }
}

/* power/XWUIRichTextEditor/XWUIRichTextEditor.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* power/XWUISheet/XWUISheet.css */
/**
 * XWUISheet — Excel/Sheets-compatible spreadsheet styling.
 * All visuals follow xwui design tokens; no hardcoded colors.
 */

.xwui-sheet {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-family-base, inherit);
    width: 100%;
    height: 100%;
    min-height: 360px;
}
.xwui-sheet-readonly { opacity: 0.92; }

/* ========== Toolbar ========== */
.xwui-sheet-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-light, var(--border-color));
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 4%, transparent));
    flex-wrap: wrap;
}
.xwui-sheet-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium, 500);
}
.xwui-sheet-tb-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.xwui-sheet-tb-btn:focus-visible { outline: 2px solid var(--role-info-fg, #2e90fa); outline-offset: 1px; }
.xwui-sheet-tb-sep { display: inline-block; width: 1px; height: 20px; background: var(--border-color); margin: 0 4px; }
.xwui-sheet-tb-format {
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

/* ========== Formula bar ========== */
.xwui-sheet-formula-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-light, var(--border-color));
    background: var(--bg-primary);
}
.xwui-sheet-formula-ref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-sheet-formula-sep {
    color: var(--text-tertiary);
    font-style: italic;
    font-family: serif;
    font-size: 0.875rem;
    padding: 0 4px;
}
.xwui-sheet-formula-input-host {
    flex: 1;
    display: inline-block;
    min-width: 0;
}

/* ========== Grid ========== */
.xwui-sheet-grid {
    flex: 1;
    overflow: auto;
    background: var(--bg-primary);
    min-height: 0;
}
.xwui-sheet-table {
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.xwui-sheet-corner,
.xwui-sheet-row-header,
.xwui-sheet-col-header {
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 5%, transparent));
    color: var(--text-tertiary);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 0.6875rem;
    text-align: center;
    border: 1px solid var(--border-light, var(--border-color));
    user-select: none;
    position: sticky;
    z-index: 1;
}
.xwui-sheet-corner { width: 36px; min-width: 36px; left: 0; top: 0; z-index: 2; }
.xwui-sheet-col-header { min-width: 90px; height: 22px; top: 0; }
.xwui-sheet-row-header { width: 36px; min-width: 36px; height: 22px; left: 0; }
.xwui-sheet-cell {
    min-width: 90px;
    height: 22px;
    padding: 2px 6px;
    border: 1px solid var(--border-light, var(--border-color));
    cursor: cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-primary);
    transition: background 0.08s;
}
.xwui-sheet-cell:hover { background: var(--bg-hover); }
.xwui-sheet-cell-active {
    outline: 2px solid var(--accent-primary, #2e90fa);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--accent-primary, #2e90fa) 7%, var(--bg-primary, #fff));
    z-index: 1;
    position: relative;
}
.xwui-sheet-cell-selected {
    background: color-mix(in srgb, var(--accent-primary, #2e90fa) 14%, var(--bg-primary, #fff));
}
.xwui-sheet-cell-active.xwui-sheet-cell-selected {
    background: color-mix(in srgb, var(--accent-primary, #2e90fa) 18%, var(--bg-primary, #fff));
}
.xwui-sheet-cell-formula { font-style: normal; }

/* ============ Header click states ============ */
.xwui-sheet-row-header,
.xwui-sheet-col-header,
.xwui-sheet-corner { cursor: pointer; transition: background 0.1s; }
.xwui-sheet-row-header:hover,
.xwui-sheet-col-header:hover,
.xwui-sheet-corner:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============ Toolbar additions: color picker + paste-special ============ */
.xwui-sheet-tb-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    color: var(--text-secondary);
    position: relative;
}
.xwui-sheet-tb-color:hover { background: var(--bg-hover); color: var(--text-primary); }
.xwui-sheet-tb-color input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border: 0; background: transparent; padding: 0;
}
.xwui-sheet-tb-color-glyph {
    font-size: 0.875rem;
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
}
.xwui-sheet-tb-paste {
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
    margin-left: 4px;
}

/* ============ Rich cell rendering ============ */
.xwui-sheet-cell-checkbox-wrap {
    display: flex; align-items: center; justify-content: center; width: 100%;
}
.xwui-sheet-cell-checkbox-wrap input { accent-color: var(--accent-primary, #2e90fa); }

.xwui-sheet-cell-person {
    display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%;
}
.xwui-sheet-cell-person img,
.xwui-sheet-cell-person-initials {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-secondary); color: #fff; font-size: 0.625rem; font-weight: 700;
}
.xwui-sheet-cell-person-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: var(--font-weight-medium, 500);
}

.xwui-sheet-cell-object {
    display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%;
}
.xwui-sheet-cell-object-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-primary, #2e90fa);
}
.xwui-sheet-cell-object-icon svg { width: 14px; height: 14px; }
.xwui-sheet-cell-object-icon img { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; }
.xwui-sheet-cell-object-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: var(--font-weight-medium, 500);
}
.xwui-sheet-cell-object-sublabel {
    color: var(--text-tertiary); font-size: 0.6875rem; flex-shrink: 0;
}

.xwui-sheet-cell-tags {
    display: inline-flex; gap: 3px; flex-wrap: wrap; align-items: center;
}
.xwui-sheet-cell-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid transparent;
    font-size: 0.625rem;
    line-height: 1.4;
    white-space: nowrap;
}
.xwui-sheet-cell-error { color: var(--role-danger-fg, #b42318); font-style: italic; }

/* ============ Autocomplete popup ============ */
.xwui-sheet-autocomplete {
    background: var(--bg-elevated, var(--bg-primary, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
    z-index: 10000;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    font-family: var(--font-family-base, inherit);
    font-size: 0.75rem;
}
.xwui-sheet-autocomplete-item {
    padding: 4px 8px;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: 6px;
    align-items: baseline;
}
.xwui-sheet-autocomplete-item:hover { background: var(--bg-hover); }
.xwui-sheet-autocomplete-item-active {
    background: color-mix(in srgb, var(--accent-primary, #2e90fa) 14%, transparent);
}
.xwui-sheet-autocomplete-name {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
    font-family: var(--font-mono, ui-monospace, monospace);
}
.xwui-sheet-autocomplete-sig {
    color: var(--text-tertiary);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwui-sheet-autocomplete-kind {
    font-size: 0.625rem;
    text-transform: uppercase;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}
.xwui-sheet-autocomplete-kind-fn   { background: color-mix(in srgb, var(--accent-primary, #2e90fa) 18%, transparent); color: var(--accent-primary, #2e90fa); }
.xwui-sheet-autocomplete-kind-col  { background: color-mix(in srgb, #00a37a 18%, transparent); color: #067647; }
.xwui-sheet-autocomplete-kind-row  { background: color-mix(in srgb, #fdab3d 18%, transparent); color: #b54708; }
.xwui-sheet-autocomplete-kind-data { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-secondary); }
.xwui-sheet-autocomplete-desc {
    grid-column: 1 / -1;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    line-height: 1.3;
    margin-top: 2px;
}

/* ============ Cell-type picker on toolbar ============ */
.xwui-sheet-tb-type {
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
    margin-left: 4px;
}

.xwui-sheet-cell-editor-host {
    width: 100%;
    height: 100%;
}
.xwui-sheet-cell-editor-host .xwui-input-text-wrapper { width: 100%; }
.xwui-sheet-cell-editor-host input {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    font-variant-numeric: tabular-nums;
}

/* ========== Formula reference highlighting ========== */
.xwui-sheet-formula-highlight-wrap {
    position: relative;
    min-width: 0;
}
.xwui-sheet-formula-highlight-wrap--formulaBar {
    flex: 1;
    display: inline-flex;
}
.xwui-sheet-formula-highlight-wrap--cellEditor {
    position: absolute;
    inset: 0;
    z-index: 31;
}
.xwui-sheet-formula-highlight-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    white-space: pre;
}
.xwui-sheet-formula-highlight-inner {
    padding: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    white-space: pre;
}
.xwui-sheet-formula-highlight-input {
    position: relative;
    z-index: 1;
    background: transparent !important;
    color: transparent !important;
    caret-color: var(--text-primary);
}
.xwui-sheet-formula-ref-token {
    font-weight: var(--font-weight-semibold, 600);
}

/* ========== Reference overlays on grid ========== */
.xwui-sheet-grid { position: relative; }
.xwui-sheet-reference-overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}
.xwui-sheet-reference-overlay {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 1px;
    pointer-events: none;
}

/* ========== Sheet tabs ========== */
.xwui-sheet-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 8px;
    border-bottom: 1px solid var(--border-light, var(--border-color));
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 4%, transparent));
    flex-shrink: 0;
    overflow-x: auto;
}
.xwui-sheet-tab {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.6875rem;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.xwui-sheet-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.xwui-sheet-tab-active {
    color: var(--accent-primary, #2e90fa);
    border-bottom-color: var(--accent-primary, #2e90fa);
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-sheet-tab-add {
    color: var(--text-tertiary);
    min-width: 28px;
}

/* ========== Status row ========== */
.xwui-sheet-status {
    padding: 3px 10px;
    border-top: 1px solid var(--border-light, var(--border-color));
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 4%, transparent));
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    flex-shrink: 0;
}

/* ========== Sizes ========== */
.xwui-sheet-xs .xwui-sheet-table { font-size: 0.6875rem; }
.xwui-sheet-xs .xwui-sheet-cell,
.xwui-sheet-xs .xwui-sheet-col-header,
.xwui-sheet-xs .xwui-sheet-row-header { height: 18px; min-width: 70px; }
:is(.xwui-sheet-s,.xwui-sheet-sm) .xwui-sheet-table { font-size: 0.75rem; }
:is(.xwui-sheet-s,.xwui-sheet-sm) .xwui-sheet-cell,
:is(.xwui-sheet-s,.xwui-sheet-sm) .xwui-sheet-col-header,
:is(.xwui-sheet-s,.xwui-sheet-sm) .xwui-sheet-row-header { height: 20px; min-width: 80px; }
:is(.xwui-sheet-m,.xwui-sheet-md) .xwui-sheet-table { font-size: 0.8125rem; }
:is(.xwui-sheet-l,.xwui-sheet-lg) .xwui-sheet-table { font-size: 0.9375rem; }
:is(.xwui-sheet-l,.xwui-sheet-lg) .xwui-sheet-cell,
:is(.xwui-sheet-l,.xwui-sheet-lg) .xwui-sheet-col-header,
:is(.xwui-sheet-l,.xwui-sheet-lg) .xwui-sheet-row-header { height: 28px; min-width: 110px; }

/* power/XWUIShellApp/XWUIShellApp.css */
/**
 * XWUIShellApp Component Styles
 * Structure and behavior only — colors come from theme CSS variables.
 *
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css   (MANDATORY — color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY — accent variables)
 * - Lines: theme/lines/balanced.css            (global border widths)
 * - Typography: theme/typography/*.css
 *
 * Layout: a vertical shell (header / body / footer); the body is a horizontal
 * row of sidebar + main. The sidebar width is driven INLINE by XWUIShellApp.ts
 * (`expanded` = sidebarWidth, `collapsed` = sidebarCollapsedWidth rail,
 * `hidden` = 0); this file only supplies structure, transitions and theming.
 */

/* ── Shell root ────────────────────────────────────────────────────────────*/
.xwui-shell-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    /* Positioning context for the absolutely-positioned skip-to-content link. */
    position: relative;
}

/* ── Shell host ────────────────────────────────────────────────────────────
   The app shell IS an XWUIShell — the SAME universal 5-region primitive
   (header / [first | body | last] / footer) the XWUIShellPage also composes.
   This host carries that shell; it fills the app-shell root between the
   (absolutely-positioned) skip link and the (flex-shrink:0) status bar. */
.xwui-shell-app-shell-host {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.xwui-shell-app-shell-host > .xwui-shell {
    flex: 1 1 auto;
    min-height: 0;
}

/* FIRST slot wrapper — pairs the activity bar (far edge) with the sidebar
   side-by-side. Plain row; widths come from each child's own CSS. */
.xwui-shell-app-first {
    display: flex;
    flex-direction: row;
    height: 100%;
    box-sizing: border-box;
}

/* BODY slot wrapper — stacks the main region over the optional bottom dock
   panel (the dock sits below the main, same column-width). */
.xwui-shell-app-body-col {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Shell header / footer (full width, above / below the body) ────────────*/
.xwui-shell-app-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    border-bottom: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
    padding: var(--spacing-md, 1rem);
}

.xwui-shell-app-footer {
    flex-shrink: 0;
    border-top: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
    padding: var(--spacing-md, 1rem);
}

/* ── Body row (sidebar + main) ─────────────────────────────────────────────*/
.xwui-shell-app-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
    position: relative; /* positioning context for the mobile backdrop */
}

/* RTL / right-anchored sidebar — mirror the body row. */
.xwui-shell-app-rtl .xwui-shell-app-body,
.xwui-shell-app-sidebar-right .xwui-shell-app-body {
    flex-direction: row-reverse;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────*/
.xwui-shell-app-sidebar {
    position: relative; /* anchors the in-sidebar toggle button */
    /* Flex item: grow/shrink 0 so the used width is exactly the `flex-basis`
       set inline by XWUIShellApp.ts. `min-width: 0` removes the automatic
       content-size floor that would otherwise stop it collapsing. The collapse
       is intentionally NOT transitioned — a transition on a flex item's sizing
       property makes the flex layout ignore the new value (it stays stuck at
       the pre-collapse width), so the state change is instant. */
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-right: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}

.xwui-shell-app-rtl .xwui-shell-app-sidebar,
.xwui-shell-app-sidebar-right .xwui-shell-app-sidebar {
    border-right: none;
    border-left: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}

.xwui-shell-app-sidebar-hidden {
    border-color: transparent;
}

/* ── Main ──────────────────────────────────────────────────────────────────*/
.xwui-shell-app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    overflow: hidden;
}

/* The app provides its own chrome (sidebar toggle, menu button, splitters), so
   the inner XWUIShellPart's hover controls strip would DUPLICATE the sidebar
   toggle (two collapse affordances on the same edge). Hide the part controls
   inside a shell-app — the app's own toggle is the single source of truth. */
.xwui-shell-app .xwui-shell-part-controls {
    display: none !important;
}

/* ── In-sidebar collapse toggle ────────────────────────────────────────────*/
.xwui-shell-app-sidebar-toggle {
    position: absolute;
    top: var(--spacing-sm, 0.5rem);
    inset-inline-end: var(--spacing-sm, 0.5rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-elevated, var(--bg-primary));
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.xwui-shell-app-sidebar-toggle:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--bg-hover, var(--bg-secondary));
}
.xwui-shell-app-sidebar-toggle:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 25, 118, 210), 0.25);
}

/* ── Hamburger menu button (lives in the shell / main header) ──────────────*/
.xwui-shell-app-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.xwui-shell-app-menu-btn:hover {
    color: var(--accent-primary);
    background: var(--bg-hover, var(--bg-secondary));
}
.xwui-shell-app-menu-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 25, 118, 210), 0.25);
}

/* ── Resizable splitter ────────────────────────────────────────────────────
   The splitter lives inside XWUIShell's positions-only body-row overlay
   (`.xwui-shell-bodyrow-shadow`), which has NO in-flow columns — the real
   first/body/last parts are grid siblings elsewhere. So it is absolutely
   positioned on the FIRST-slot boundary via `--xwui-shell-app-first-width`
   (activity bar + sidebar, published by the shell on every sidebar resize). */
.xwui-shell-app-splitter {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(
        var(--xwui-shell-app-first-width, var(--xwui-shell-app-sidebar-width, 280px)) - 2px
    ); /* center the 5px handle on the boundary line */
    width: 5px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s ease;
    z-index: 3;
}
/* Right-anchored sidebar: the first slot mirrors to the inline-end edge. */
.xwui-shell-app-sidebar-right .xwui-shell-app-splitter {
    inset-inline-start: auto;
    inset-inline-end: calc(
        var(--xwui-shell-app-first-width, var(--xwui-shell-app-sidebar-width, 280px)) - 2px
    );
}
.xwui-shell-app-splitter:hover,
.xwui-shell-app-dragging .xwui-shell-app-splitter {
    background: var(--accent-primary);
}
/* The splitter is a keyboard-operable `role="separator"` — give it a clear
   focus ring so keyboard users can see they've landed on the resize handle. */
.xwui-shell-app-splitter:focus-visible {
    outline: none;
    background: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--bg-app, #fff), 0 0 0 4px var(--accent-primary);
}

/* While dragging the splitter: no text selection. */
.xwui-shell-app-dragging {
    user-select: none;
    cursor: col-resize;
}

/* ── Mobile: the sidebar becomes an overlay over the main area ─────────────*/
.xwui-shell-app-backdrop {
    position: absolute;
    inset: 0;
    /* A dim scrim + a light blur on the page behind — enough to push the
       content back without fully hiding it (the menu itself is opaque). */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 8;
}

.xwui-shell-app-mobile .xwui-shell-app-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 10;
    /* As an overlay the sidebar floats over the page content, so it needs an
       opaque surface of its own — in-flow on desktop it sits on the app bg. */
    background: var(--bg-primary, var(--bg-app));
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.25));
}
.xwui-shell-app-sidebar-right.xwui-shell-app-mobile .xwui-shell-app-sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.xwui-shell-app-sidebar-overlay .xwui-shell-app-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* The in-sidebar collapse toggle and the splitter make no sense on mobile,
   where the sidebar is an open/closed overlay rather than a sized column. */
.xwui-shell-app-mobile .xwui-shell-app-sidebar-toggle,
.xwui-shell-app-mobile .xwui-shell-app-splitter {
    display: none;
}

/* ══ Built-in nav menu — hosts an XWUITree ════════════════════════════════
   `data.nav` is rendered by COMPOSING an XWUITree into `.xwui-shell-app-nav`
   (see XWUIShellApp.ts). The tree owns its own `.xwui-tree-*` markup +
   theming; this wrapper only sets the sidebar padding and the collapsed-rail
   behaviour against the tree's elements. */
.xwui-shell-app-nav {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--spacing-sm, 0.5rem);
}
.xwui-shell-app-nav .xwui-tree {
    min-width: 0;
}

/* Collapsed rail — icons only, FIRST LEVEL only. Hide the hosted XWUITree's
   labels / badges / expand-arrows and its nested child lists, then center the
   remaining icon, so the rail stays a clean column of icons. */
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-nav .xwui-tree-node-label,
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-nav .xwui-tree-node-badge,
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-nav .xwui-tree-expand-icon,
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-nav .xwui-tree-spacer {
    display: none !important;
}
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-nav .xwui-tree-children {
    display: none !important;
}
.xwui-shell-app-sidebar-collapsed .xwui-shell-app-nav .xwui-tree-node-content {
    justify-content: center;
    padding-inline-start: 0 !important;
}

/* ══ Main header (breadcrumbs + consumer header + tab strip) ═══════════════ */
.xwui-shell-app-main-header {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.xwui-shell-app-main-header-content { min-width: 0; }

/* Header bar — a flex row pairing the breadcrumb trail (start) with the
   right-aligned theme-switcher slot (end). Only rendered inside the main
   header; the switcher itself is a composed XWUIStyleSwitch. */
.xwui-shell-app-main-header-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    min-width: 0;
}
.xwui-shell-app-main-header-bar > .xwui-shell-app-breadcrumbs {
    flex: 1 1 auto;
}
/* Theme-switcher slot — pinned to the end of the header bar / site-header
   actions. The shell only positions the slot; XWUIStyleSwitch owns its UI. */
.xwui-shell-app-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}
.xwui-shell-app-site-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}
.xwui-shell-app-themeswitcher {
    display: inline-flex;
    align-items: center;
}

/* ── Breadcrumb trail — hosts an XWUINavBreadcrumbs ────────────────────────
   `data.breadcrumbs` is rendered by composing an XWUINavBreadcrumbs into this
   wrapper; the component owns its own `.xwui-breadcrumbs-*` markup + theming. */
.xwui-shell-app-breadcrumbs {
    min-width: 0;
}
.xwui-shell-app-breadcrumbs-empty { display: none; }

/* ── Tab strip — hosts an XWUINavTabs ──────────────────────────────────────
   In `tabs` nav mode the active section's children are rendered by composing
   an XWUINavTabs (strip-only, no content panels) into this wrapper. */
.xwui-shell-app-tabstrip {
    min-width: 0;
}
.xwui-shell-app-tabstrip-hidden { display: none !important; }

/* ══ Nav renderer: rail — hosts an XWUINavRail ═════════════════════════════
   The `rail` renderer composes an XWUINavRail (scope: container) into the
   sidebar's nav slot; the rail positions itself absolutely inside, so the
   host must be a positioned, flex-filling box. */
.xwui-shell-app-nav[data-nav-renderer="rail"] {
    position: relative;
    flex: 1 1 auto;
    padding: 0;
}

/* ══ Layout preset: website ════════════════════════════════════════════════
   header (XWUIBarSiteHeader) + full-width main + footer (XWUIBarSiteFooter).
   No sidebar row — the shell is a plain vertical stack and the PAGE scrolls
   (the site header pins itself via its own `position: sticky`). */
.xwui-shell-app[data-layout="website"] {
    min-height: 100vh;
}
.xwui-shell-app-site-header,
.xwui-shell-app-site-footer {
    flex-shrink: 0;
    display: block;
    width: 100%;
}
.xwui-shell-app[data-layout="website"] .xwui-shell-app-main {
    /* Override the dashboard main: the website main grows with its content and
       lets the document scroll, rather than owning an inner scroll region. */
    display: block;
    overflow: visible;
    flex: 1 0 auto;
}

/* ══ Layout preset: blank ══════════════════════════════════════════════════
   Just the main region — no header / sidebar / footer chrome. */
.xwui-shell-app[data-layout="blank"] {
    height: 100vh;
    height: 100dvh;
}
.xwui-shell-app[data-layout="blank"] .xwui-shell-app-main {
    flex: 1 1 auto;
}

/* ══ Accessibility ═════════════════════════════════════════════════════════ */

/* Skip-to-content link — visually hidden until it receives keyboard focus,
   then it slides into the top-left corner (WCAG 2.4.1 "Bypass Blocks"). It is
   the first focusable element in the shell, so it's the very first Tab stop. */
.xwui-shell-app-skip-link {
    position: absolute;
    inset-inline-start: 0;
    /* Fully off-screen until focused. A fixed negative offset (not a % transform)
       guarantees the link never peeks — the old translateY(-150%) only cleared
       the element by a few px, so a sliver could show mid-transition or at some
       zoom levels. It stays in the a11y tree + tab order, sliding in only on
       keyboard focus (WCAG 2.4.1 "Bypass Blocks"). */
    top: -100px;
    z-index: 100;
    margin: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent-primary, #1976d2);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: top 0.15s ease;
}
.xwui-shell-app-skip-link:focus,
.xwui-shell-app-skip-link:focus-visible {
    top: 0;
    outline: 2px solid var(--bg-app, #fff);
    outline-offset: 2px;
}

/* The main region is `tabindex="-1"` so the skip link can move focus into it;
   that focus is programmatic, not a keyboard Tab stop, so suppress the ring. */
.xwui-shell-app-main:focus {
    outline: none;
}

/* ══ Performance ═══════════════════════════════════════════════════════════
   `contain` lets the browser isolate layout / paint / style recalculation to
   the sidebar and main subtrees instead of reflowing the whole document when
   their contents change — the big win for long-lived dashboards. */
.xwui-shell-app-sidebar,
.xwui-shell-app-main {
    contain: layout style;
}
/* The website footer is reliably below the fold — let the browser skip
   rendering work for it until it scrolls near the viewport. */
.xwui-shell-app-site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

/* ══ Reduced motion ════════════════════════════════════════════════════════
   Honour `prefers-reduced-motion`: drop the chrome transitions (the sidebar
   collapse is already instant by design — see the sidebar note above). */
@media (prefers-reduced-motion: reduce) {
    .xwui-shell-app-sidebar-toggle,
    .xwui-shell-app-menu-btn,
    .xwui-shell-app-splitter,
    .xwui-shell-app-backdrop,
    .xwui-shell-app-skip-link {
        transition: none !important;
    }
}

/* ══ Dockable regions ══════════════════════════════════════════════════════
   The inspector + bottom dock are each an XWUIPanel; the shell only sizes
   their host (width / height driven inline by XWUIShellApp.ts) and themes
   the dividers. The status bar is a thin slot pinned at the very bottom. */

/* Right inspector panel — an in-flow flex item after the main region. Same
   sizing trick as the sidebar: grow/shrink 0 + min-width 0 so the used width
   is exactly the inline flex-basis (and it can collapse to 0). */
.xwui-shell-app-rightpanel {
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    contain: layout style;
    border-inline-start: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}
.xwui-shell-app-rightpanel:not(.xwui-shell-app-rightpanel-open) {
    border-color: transparent;
}
/* No room for a docked inspector on phones — it collapses out. (A later phase
   morphs it into a bottom sheet, per the adaptive-mapping spec.) */
.xwui-shell-app[data-viewport="phone"] .xwui-shell-app-rightpanel {
    display: none;
}
/* Inspector relocated to the bottom dock — full width, height-sized, top border
   instead of the side border. */
.xwui-shell-app-rightpanel.xwui-shell-app-rightpanel-bottom {
    width: auto !important;
    flex-basis: auto !important;
    border-inline-start: none;
    border-block-start: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}
.xwui-shell-app-rightpanel-bottom:not(.xwui-shell-app-rightpanel-open) {
    border-color: transparent;
}

/* Bottom dock panel — a docked strip below the body row (console / activity). */
.xwui-shell-app-bottompanel {
    flex-shrink: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    contain: layout style;
    border-top: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}
.xwui-shell-app-bottompanel:not(.xwui-shell-app-bottompanel-open) {
    border-color: transparent;
}

/* Status bar — a thin OS-style strip at the very bottom (editor / desktop). */
.xwui-shell-app-statusbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    min-height: 26px;
    padding: 0 var(--spacing-md, 1rem);
    border-top: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
    background: var(--bg-secondary, var(--bg-app));
    color: var(--text-secondary);
    font-size: 0.78rem;
}

/* ══ Top loading bar ═══════════════════════════════════════════════════════
   A hairline XWUIProgressBar pinned to the top edge of the shell — route
   transitions / async work. The shell only positions the host; the bar
   itself (track / fill / indeterminate sweep) is pure XWUIProgressBar. */
.xwui-shell-app-loadingbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    pointer-events: none;
}
.xwui-shell-app-loadingbar .xwui-progress {
    /* Let the progress bar span the shell edge-to-edge with no chrome. */
    width: 100%;
}

/* The toast host is a base-class plumbing slot only — XWUIToast renders its
   own body-level container, so the slot must never take up layout space. */
.xwui-shell-app-toast-host {
    display: none;
}

/* ══ Contextual save bar ═══════════════════════════════════════════════════
   A sticky, in-flow strip docked at the top/bottom of the main region — so it
   always tracks the sidebar + content width with no positioning math. It is
   composed from XWUIButtons; the shell only themes the strip + lays it out. */
.xwui-shell-app-has-savebar .xwui-shell-app-main {
    /* Stack the main panel + the save bar instead of the default row. */
    flex-direction: column;
}
.xwui-shell-app-has-savebar .xwui-shell-app-main > .xwui-panel {
    /* The panel defaults to height:100% — let it share the column instead. */
    height: auto;
    flex: 1 1 0;
    min-height: 0;
}
.xwui-shell-app-savebar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    box-sizing: border-box;
    background: var(--bg-secondary, var(--bg-app));
    border-top: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}
.xwui-shell-app-savebar[data-position="top"] {
    order: -1;
    border-top: none;
    border-bottom: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}
/* `host.hidden` only wins against the UA `display:none` — re-assert it here
   because the rule above sets `display:flex`. */
.xwui-shell-app-savebar[hidden] {
    display: none;
}
.xwui-shell-app-savebar-message {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, var(--text-color));
}
.xwui-shell-app-savebar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

/* ══ Activity bar ══════════════════════════════════════════════════════════
   A slim vertical XWUINavRail on the far edge of the body row (the VS Code
   activity-bar pattern). The rail is `scope: container` — it positions itself
   absolutely inside — so the host is a positioned, fixed-width, full-height
   flex item. The view host is the swappable sidebar body it drives. */
.xwui-shell-app-activitybar {
    position: relative;
    flex: 0 0 auto;
    width: var(--xwui-shell-app-activitybar-width, 56px);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--bg-secondary, var(--bg-app));
    border-inline-end: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
    contain: layout style;
}
/* The view host fills the sidebar body and scrolls — the activity rail swaps
   its content; the host itself is just a stable, themable scroll container. */
.xwui-shell-app-view-host {
    height: 100%;
    overflow: auto;
}

/* ══ Collapsed-rail flyout ═════════════════════════════════════════════════
   When the sidebar is the collapsed icon rail, hovering / focusing a parent
   nav item pops this flyout — a vertical XWUINavMenu of its children. The
   shell positions it (position:fixed, set inline); XWUINavMenu owns the item
   markup + theming, the shell just frames + themes the popover shell. */
.xwui-shell-app-rail-flyout {
    position: fixed;
    z-index: 70;
    min-width: 200px;
    max-width: 320px;
    max-height: 70vh;
    overflow: auto;
    box-sizing: border-box;
    padding: var(--spacing-xs, 0.25rem);
    background: var(--bg-primary, var(--bg-app));
    border: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, var(--shadow-xl));
}
.xwui-shell-app-rail-flyout[hidden] {
    display: none;
}
.xwui-shell-app-rail-flyout-title {
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) {
    .xwui-shell-app-rail-flyout {
        transition: none !important;
    }
}

/* ══ Density: compact chrome ═══════════════════════════════════════════════
   Tightens the app chrome (header / main-header / tab strip / status bar)
   without touching the consumer's page content. */
.xwui-shell-app-density-compact {
    --xwui-shell-app-density: compact;
}
.xwui-shell-app-density-compact .xwui-shell-app-header,
.xwui-shell-app-density-compact .xwui-shell-app-main-header,
.xwui-shell-app-density-compact .xwui-shell-app-tabstrip {
    padding-block: var(--spacing-xxs, 4px);
    min-height: 0;
}
.xwui-shell-app-density-compact .xwui-shell-app-statusbar {
    min-height: 22px;
    font-size: var(--font-size-xs, 0.72rem);
}

/* ══ Watermark overlay ═════════════════════════════════════════════════════
   A repeating, non-interactive diagonal text overlay (security / branding).
   Sits above content but ignores pointer events; blends so it reads on both
   light and dark surfaces. */
.xwui-shell-app-watermark {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.45;
    background-repeat: repeat;
    mix-blend-mode: multiply;
}
[data-theme="dark"] .xwui-shell-app-watermark,
.xwui-theme-dark .xwui-shell-app-watermark {
    mix-blend-mode: screen;
}

/* ══ Status-bar item groups (start / centre / end) ═════════════════════════ */
.xwui-shell-app-statusbar-start,
.xwui-shell-app-statusbar-end {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}
.xwui-shell-app-statusbar-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}
.xwui-shell-app-statusbar-end {
    justify-content: flex-end;
}

/* ══ Settings drawer ═══════════════════════════════════════════════════════ */
.xwui-shell-app-settings-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary, var(--text-color));
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.xwui-shell-app-settings-gear:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.06));
    color: var(--text-primary, var(--text-color));
}
.xwui-shell-app-settings {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1.25rem);
    padding: var(--spacing-md, 1rem);
}
.xwui-shell-app-settings-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
}
.xwui-shell-app-settings-label {
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.xwui-shell-app-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.5rem);
}

/* ── Editor split-panes ─────────────────────────────────────────────────────
   The main panel body is replaced by a flex container of panes + draggable
   gutters. Panes own their own scroll; gutters are thin grab strips. */
.xwui-shell-app-split {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.xwui-shell-app-split[data-orientation="vertical"] { flex-direction: column; }
.xwui-shell-app-split-pane {
    min-width: 0;
    min-height: 0;
    overflow: auto;
}
.xwui-shell-app-split-gutter {
    flex: 0 0 auto;
    position: relative;
    background: var(--border-color, #e2e8f0);
    transition: background 120ms ease;
    touch-action: none;
}
.xwui-shell-app-split-gutter[data-orientation="horizontal"] { width: 5px; cursor: col-resize; }
.xwui-shell-app-split-gutter[data-orientation="vertical"]   { height: 5px; cursor: row-resize; }
.xwui-shell-app-split-gutter:hover,
.xwui-shell-app-split-gutter-dragging {
    background: var(--color-primary, #3b82f6);
}

/* ── Utility bar (pinned tool popovers) ─────────────────────────────────────
   A thin vertical icon rail pinned to the end edge of the shell; clicking a
   button toggles a floating XWUIPanel popover next to the rail. */
.xwui-shell-app-utilitybar {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.25rem;
    background: var(--bg-secondary, #f8fafc);
    border-inline-start: var(--border-width-regular, 1.5px) solid var(--border-color, #e2e8f0);
}
.xwui-shell-app-utility-popover {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 3rem;
    z-index: 31;
    width: min(320px, 70vw);
    max-height: calc(100% - 1rem);
    overflow: auto;
    background: var(--bg-primary, #fff);
    border: var(--border-width-regular, 1.5px) solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28);
}

/* ── App launcher grid ──────────────────────────────────────────────────────*/
.xwui-shell-app-launcher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
}
.xwui-shell-app-launcher-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 0.5rem;
    border: var(--border-width-regular, 1.5px) solid transparent;
    border-radius: var(--radius-md, 10px);
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #0f172a);
    font: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.xwui-shell-app-launcher-tile:hover {
    border-color: var(--color-primary, #3b82f6);
    background: var(--bg-primary, #fff);
}
.xwui-shell-app-launcher-tile[aria-current="true"] {
    border-color: var(--color-primary, #3b82f6);
}
.xwui-shell-app-launcher-tile-label {
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.2;
}

/* ── Phone bottom-sheet morph ───────────────────────────────────────────────
   On phone, the bottom-docked inspector reads as a sheet: rounded top corners,
   a grab handle, and a stronger shadow lifting it off the content. */
.xwui-shell-app-phone-sheet .xwui-shell-app-rightpanel-bottom {
    border-start-start-radius: var(--radius-lg, 16px);
    border-start-end-radius: var(--radius-lg, 16px);
    box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.xwui-shell-app-phone-sheet .xwui-shell-app-rightpanel-bottom::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 6px;
    margin-inline: auto;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color, #cbd5e1);
    z-index: 2;
}

/* power/XWUIShellPage/XWUIShellPage.css */
/**
 * XWUIShellPage Component Styles
 * Structure + theming only — colours come from theme CSS variables.
 *
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{theme}.css, theme/accents/{accent}.css (MANDATORY)
 * - Lines: theme/lines/balanced.css (border widths)
 *
 * The page IS an XWUIPanel (header / body / footer); this file only styles the
 * page-specific header composite (breadcrumbs + title row + description), the
 * content body and the footer. Max-width / centering / padding are applied
 * inline by XWUIShellPage.ts from config — not here.
 */

/* ── Page root ─────────────────────────────────────────────────────────────
   Fills the app shell's context/main body. The XWUIPanel inside owns the
   header / body / footer stacking; the root just fills + isolates. */
.xwui-shell-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
    contain: layout style;
}
.xwui-shell-page > .xwui-shell {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Page header (breadcrumbs + title row + description) ───────────────────
   Sits in the XWUIPanel's header slot. Horizontal padding is applied inline
   (so it tracks the content column); vertical rhythm + the divider live here. */
.xwui-shell-page-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
    padding-block: var(--spacing-md, 1rem);
}
.xwui-shell-header:has(> .xwui-shell-page-header) {
    border-bottom: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}

/* Breadcrumb trail — hosts a composed XWUINavBreadcrumbs; the component owns
   its own `.xwui-breadcrumbs-*` markup + theming. */
.xwui-shell-page-breadcrumbs {
    min-width: 0;
}

/* Title row — the <h1> (start) + the toolbar / actions slot (end). */
.xwui-shell-page-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    min-width: 0;
}
.xwui-shell-page-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary, var(--text-color));
}
.xwui-shell-page-title[hidden] {
    display: none;
}

/* Toolbar / actions slot — pinned to the end of the title row. */
.xwui-shell-page-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}
.xwui-shell-page-toolbar[hidden] {
    display: none;
}

/* Description — a muted sub-line under the title. */
.xwui-shell-page-description {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.xwui-shell-page-description[hidden] {
    display: none;
}

/* ── Page body wrapper ────────────────────────────────────────────────────
   Sits in the XWUIShell's (scrollable) body slot. Hosts the content slot and
   the optional sticky action bar. The wrapper is the scroll container; the
   sticky-actions child latches to its bottom edge via `position: sticky`. */
.xwui-shell-page-body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ── Page content ─────────────────────────────────────────────────────────
   The consumer-facing content slot inside the body wrapper. Max-width /
   centering / padding are applied inline by XWUIShellPage.ts from config. */
.xwui-shell-page-content {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Sticky action bar ────────────────────────────────────────────────────
   The "Save / Cancel" / wizard-controls bar that latches to the bottom of
   the body region while content scrolls behind it. Horizontal padding is
   applied inline by XWUIShellPage.ts (so it tracks the content column);
   vertical rhythm + the divider live here. */
.xwui-shell-page-sticky-actions {
    box-sizing: border-box;
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm, 0.5rem);
    padding-block: var(--spacing-sm, 0.5rem);
    background: var(--surface-primary, var(--bg-color));
    border-top: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}

/* ── Asides (start / end edge columns) ────────────────────────────────────
   Sit in the XWUIShell's `first` / `last` slots. RTL-correct: in RTL,
   `aside-start` lands on the right edge automatically (the shell mirrors
   the column placement). Each aside owns its own internal padding so
   industry-page subclasses can stack tools, filters, inspectors etc.
   without fighting inherited rules. */
.xwui-shell-page-aside-start,
.xwui-shell-page-aside-end {
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    padding: var(--spacing-md, 1rem);
    background: var(--surface-secondary, transparent);
}
.xwui-shell-page-aside-start {
    border-inline-end: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}
.xwui-shell-page-aside-end {
    border-inline-start: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}

/* ── Page footer ──────────────────────────────────────────────────────────
   Sits in the XWUIShell's footer slot. Horizontal padding inline; the divider
   + vertical rhythm here. */
.xwui-shell-page-footer {
    box-sizing: border-box;
    padding-block: var(--spacing-md, 1rem);
}
.xwui-shell-footer:has(> .xwui-shell-page-footer) {
    border-top: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color));
}

/* ── Responsive asides (stack on phone) ─────────────────────────────────────
   When the page width drops to / below the breakpoint, a ResizeObserver adds
   `xwui-shell-page-asides-stacked`. The inner XWUIShell — a direct child of the
   page root — collapses from 3 columns to a single column so the asides flow
   ABOVE / BELOW the content instead of flanking it. Pure CSS from here. */
.xwui-shell-page-asides-stacked > .xwui-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "first"
        "body"
        "last"
        "footer";
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
/* Full-width asides read better with a separating hairline when stacked. */
.xwui-shell-page-asides-stacked .xwui-shell-page-aside-start {
    border-bottom: var(--border-width-regular, 1.5px) solid var(--border-color, #e2e8f0);
}
.xwui-shell-page-asides-stacked .xwui-shell-page-aside-end {
    border-top: var(--border-width-regular, 1.5px) solid var(--border-color, #e2e8f0);
}

/* ── Performance ──────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .xwui-shell-page,
    .xwui-shell-page * {
        transition: none !important;
    }
}

/* power/XWUISidePanel/XWUISidePanel.css */
/**
 * XWUISidePanel — right-side context panel.
 */

.xwui-side-panel {
    width: var(--side-panel-w, 320px);
    background: var(--bg-elevated, var(--bg-primary, #fff));
    border: 1px solid var(--border-light, var(--border-color));
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    transition: width 0.2s ease;
}
.xwui-side-panel-collapsed { width: 48px; }
.xwui-side-panel-sticky { position: sticky; top: 0; align-self: flex-start; max-height: 100vh; }
.xwui-side-panel-left { /* mirror visual treatment if a consumer floats it */ }

.xwui-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-light, var(--border-color));
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 4%, transparent));
}
.xwui-side-panel-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwui-side-panel-collapsed .xwui-side-panel-title { display: none; }
.xwui-side-panel-ctrls { display: inline-flex; gap: 2px; flex-shrink: 0; }
.xwui-side-panel-ctrl {
    width: 26px; height: 26px;
    border: 0; background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xwui-side-panel-ctrl:hover { background: var(--bg-active); color: var(--text-primary); }
.xwui-side-panel-ctrl svg { width: 14px; height: 14px; display: block; }

.xwui-side-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.xwui-side-panel-collapsed .xwui-side-panel-body { display: none; }

.xwui-side-panel-section {
    border-bottom: 1px solid var(--border-light, var(--border-color));
}
.xwui-side-panel-section:last-child { border-bottom: 0; }

.xwui-side-panel-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
}
.xwui-side-panel-section-toggle {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold, 600);
    text-align: left;
}
.xwui-side-panel-section-toggle:hover { color: var(--text-primary); }
.xwui-side-panel-section-toggle:focus-visible { outline: 2px solid var(--role-info-fg, #2e90fa); outline-offset: 2px; border-radius: 4px; }
.xwui-side-panel-section-caret { display: inline-flex; transition: transform 0.18s; color: var(--text-tertiary); }
.xwui-side-panel-section-caret svg { width: 12px; height: 12px; }
.xwui-side-panel-section-collapsed .xwui-side-panel-section-caret { transform: rotate(-90deg); }
.xwui-side-panel-section-icon { display: inline-flex; color: var(--text-tertiary); }
.xwui-side-panel-section-icon svg { width: 14px; height: 14px; }
.xwui-side-panel-section-title { color: var(--text-primary); flex: 1; }
.xwui-side-panel-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 0.45em;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold, 600);
}

.xwui-side-panel-section-actions { display: inline-flex; gap: 2px; }
.xwui-side-panel-section-action {
    width: 22px; height: 22px;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xwui-side-panel-section-action:hover { background: var(--bg-active); color: var(--text-primary); }
.xwui-side-panel-section-action svg { width: 12px; height: 12px; display: block; }

.xwui-side-panel-section-body {
    padding: 0.25rem 0.875rem 0.875rem;
    color: var(--text-primary);
}

/* power/XWUISortableList/XWUISortableList.css */
/**
 * XWUISortableList Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-sortable-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-sortable-list-item {
    cursor: move;
    user-select: none;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    position: relative;
}

.xwui-sortable-list-item:hover {
    transform: translateY(-2px);
}

.xwui-sortable-list-item-dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.xwui-sortable-list-item:active {
    cursor: grabbing;
}


/* power/XWUIStatusPicker/XWUIStatusPicker.css */
/**
 * XWUIStatusPicker — colored status pill picker.
 * Background colors come from per-option colors (Monday-style); the rest tracks theme tokens.
 */

.xwui-status-picker {
    position: relative;
    display: inline-block;
    width: 100%;
}

.xwui-status-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 8rem;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    color: #fff;
    background: var(--bg-secondary);
    cursor: pointer;
    font-weight: var(--font-weight-semibold, 600);
    font-family: inherit;
    transition: filter 0.15s, opacity 0.15s, background 0.2s;
    line-height: 1.2;
    text-align: center;
    justify-content: center;
}
.xwui-status-picker-trigger:hover:not(:disabled) { filter: brightness(0.95); }
.xwui-status-picker-trigger:focus-visible {
    outline: 2px solid var(--role-info-fg, #2e90fa);
    outline-offset: 2px;
}
.xwui-status-picker-trigger:disabled { opacity: 0.7; cursor: not-allowed; }

.xwui-status-picker-trigger-empty {
    color: var(--text-tertiary) !important;
    background: transparent !important;
    border: 1px dashed var(--border-color);
    font-weight: var(--font-weight-normal, 400);
}

.xwui-status-picker-trigger-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwui-status-picker-trigger-placeholder { white-space: nowrap; }

.xwui-status-picker-trigger-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.85;
}
.xwui-status-picker-trigger-clear:hover { background: rgba(0, 0, 0, 0.18); opacity: 1; }
.xwui-status-picker-trigger-clear svg { width: 0.7em; height: 0.7em; display: block; }

.xwui-status-picker-popover {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--bg-elevated, var(--bg-primary, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.xwui-status-picker-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    color: #fff;
    cursor: pointer;
    font-weight: var(--font-weight-semibold, 600);
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    transition: filter 0.12s;
    position: relative;
}
.xwui-status-picker-option:hover:not(:disabled) { filter: brightness(1.05); }
.xwui-status-picker-option:disabled { opacity: 0.5; cursor: not-allowed; }
.xwui-status-picker-option:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}
.xwui-status-picker-option-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwui-status-picker-option-desc { font-size: 0.85em; opacity: 0.85; font-weight: var(--font-weight-normal, 400); }
.xwui-status-picker-option-check {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xwui-status-picker-option-check svg { width: 0.95em; height: 0.95em; display: block; }

/* Sizes */
.xwui-status-picker-xs .xwui-status-picker-trigger,
.xwui-status-picker-xs .xwui-status-picker-option { padding: 3px 8px; font-size: 0.6875rem; }
:is(.xwui-status-picker-s,.xwui-status-picker-sm) .xwui-status-picker-trigger,
:is(.xwui-status-picker-s,.xwui-status-picker-sm) .xwui-status-picker-option { padding: 4px 10px; font-size: 0.75rem; }
:is(.xwui-status-picker-m,.xwui-status-picker-md) .xwui-status-picker-trigger,
:is(.xwui-status-picker-m,.xwui-status-picker-md) .xwui-status-picker-option { padding: 6px 12px; font-size: 0.8125rem; }
:is(.xwui-status-picker-l,.xwui-status-picker-lg) .xwui-status-picker-trigger,
:is(.xwui-status-picker-l,.xwui-status-picker-lg) .xwui-status-picker-option { padding: 8px 14px; font-size: 0.9375rem; }

/* power/XWUIViewport2D/XWUIViewport2D.css */
/**
 * XWUIViewport2D Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/*.css
 * - Typography: theme/typography/*.css
 */

.xwui-viewport2d {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-secondary, #f5f5f5);
    touch-action: none;
}

.xwui-viewport2d-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
}

.xwui-viewport2d-nav-container {
    pointer-events: none;
}

/* Make nav wrapper non-blocking */
.xwui-viewport2d-nav-container .xwui-nav {
    pointer-events: none;
}

/* Make all interactive elements clickable */
.xwui-viewport2d-nav-container .xwui-nav-controls,
.xwui-viewport2d-nav-container .xwui-nav-search-container,
.xwui-viewport2d-nav-container button,
.xwui-viewport2d-nav-container input,
.xwui-viewport2d-nav-container .xwui-button,
.xwui-viewport2d-nav-container .xwui-nav-control-btn {
    pointer-events: auto;
}


/* power/XWUIViewport3D/XWUIViewport3D.css */
/**
 * XWUIViewport3D Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/*.css
 * - Typography: theme/typography/*.css
 */

.xwui-viewport3d {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-secondary, #f5f5f5);
    touch-action: none;
}

.xwui-viewport3d-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
}

.xwui-viewport3d-nav-container {
    pointer-events: none;
}

/* Make nav wrapper non-blocking */
.xwui-viewport3d-nav-container .xwui-nav {
    pointer-events: none;
}

/* Make all interactive elements clickable */
.xwui-viewport3d-nav-container .xwui-nav-controls,
.xwui-viewport3d-nav-container .xwui-nav-search-container,
.xwui-viewport3d-nav-container button,
.xwui-viewport3d-nav-container input,
.xwui-viewport3d-nav-container .xwui-button,
.xwui-viewport3d-nav-container .xwui-nav-control-btn {
    pointer-events: auto;
}

.xwui-viewport3d-renderer-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.xwui-viewport3d-renderer-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.xwui-viewport3d-nav-container {
    z-index: 100 !important;
    pointer-events: none !important;
}

.xwui-viewport3d-nav-container .xwui-nav-controls {
    z-index: 101 !important;
    pointer-events: auto !important;
    position: relative !important;
}


/* power/XWUIViewSwitcher/XWUIViewSwitcher.css */
/**
 * XWUIViewSwitcher — icon-tab toggle.
 */

.xwui-view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 4%, transparent));
    border-radius: var(--radius-md, 8px);
    padding: 3px;
    border: 1px solid var(--border-light, var(--border-color, transparent));
    flex-wrap: wrap;
}

.xwui-view-switcher-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 10px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    font-family: inherit;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    line-height: 1;
    position: relative;
}
.xwui-view-switcher-tab:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.xwui-view-switcher-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.xwui-view-switcher-tab:focus-visible {
    outline: 2px solid var(--role-info-fg, var(--accent-primary, #2e90fa));
    outline-offset: 2px;
}

.xwui-view-switcher-tab-active {
    background: var(--bg-primary, var(--bg-elevated, #fff));
    color: var(--text-primary);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}

.xwui-view-switcher-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xwui-view-switcher-tab-icon svg {
    width: 1.05em;
    height: 1.05em;
    display: block;
}

.xwui-view-switcher-tab-label { white-space: nowrap; }

.xwui-view-switcher-tab-badge {
    margin-left: 0.25rem;
    min-width: 1.25em;
    height: 1.25em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--role-danger-fg, #d92d20);
    color: #fff;
    font-size: 0.7em;
    font-weight: var(--font-weight-semibold, 600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Variants */
.xwui-view-switcher-pills {
    background: transparent;
    border-color: transparent;
    gap: 0.4rem;
    padding: 0;
}
.xwui-view-switcher-pills .xwui-view-switcher-tab {
    border: 1px solid var(--border-color);
    border-radius: 999px;
}
.xwui-view-switcher-pills .xwui-view-switcher-tab-active {
    background: var(--accent-primary-light, color-mix(in srgb, var(--accent-primary, #2e90fa) 14%, transparent));
    color: var(--accent-primary, #2e90fa);
    border-color: var(--accent-primary, #2e90fa);
    box-shadow: none;
}

.xwui-view-switcher-segmented {
    /* default tab style already gives this look */
}

/* Sizes */
.xwui-view-switcher-xs { font-size: 0.6875rem; }
.xwui-view-switcher-xs .xwui-view-switcher-tab { padding: 3px 7px; }
:is(.xwui-view-switcher-s,.xwui-view-switcher-sm) { font-size: 0.75rem; }
:is(.xwui-view-switcher-s,.xwui-view-switcher-sm) .xwui-view-switcher-tab { padding: 4px 8px; }
:is(.xwui-view-switcher-m,.xwui-view-switcher-md) { font-size: 0.8125rem; }
:is(.xwui-view-switcher-l,.xwui-view-switcher-lg) { font-size: 0.9375rem; }
:is(.xwui-view-switcher-l,.xwui-view-switcher-lg) .xwui-view-switcher-tab { padding: 7px 13px; }

/* power/XWUIWizard/XWUIWizard.css */
/**
 * XWUIWizard Component Styles
 */

.xwui-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 560px;
  font-family: var(--font-family-base);
}

.xwui-wizard__title-host {
  width: 100%;
}

.xwui-wizard__title .xwui-titled-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.xwui-wizard__title .xwui-titled-content {
  gap: 0;
}

.xwui-wizard__indicator {
  display: flex;
  gap: 8px;
  align-items: center;
}

.xwui-wizard__dot {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.xwui-wizard__dot--active {
  color: var(--text-inverse);
  background: var(--accent-primary);
}

.xwui-wizard__dot--done {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.xwui-wizard__step-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xwui-wizard__step-title-host {
  width: 100%;
}

.xwui-wizard__step-title .xwui-titled-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.xwui-wizard__step-title .xwui-titled-content {
  gap: 0;
}

.xwui-wizard__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xwui-wizard__control-host {
  width: 100%;
}

.xwui-wizard__control-host > * {
  width: 100%;
}

.xwui-wizard__label-host {
  width: 100%;
}

.xwui-wizard__field-help-host {
  width: 100%;
}

.xwui-wizard__field-help .xwui-titled-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.xwui-wizard__field-help .xwui-titled-content {
  gap: 0;
}

.xwui-wizard__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.xwui-wizard__input,
.xwui-wizard__select {
  width: 100%;
}

.xwui-wizard__switch {
  width: fit-content;
}

.xwui-wizard__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.xwui-wizard__radio-option {
  min-width: 0;
}

.xwui-wizard__radio-btn {
  min-width: 100px;
}

.xwui-wizard__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.xwui-wizard__btn-host {
  display: flex;
}

.xwui-wizard__btn {
  min-width: 110px;
}