/* Adapted from ToolMaster.Web/wwwroot/css/xceltech.css.
   Keep the integration theme after module styles; module geometry and status colors remain local. */
:root {
    --dnc-background: #f4f6f9;
    --dnc-sidebar: #111827;
    --dnc-primary: #1f3b93;
    --dnc-primary-hover: #172f78;
    --dnc-border: #e5e7eb;
    --dnc-text: #1f2937;
    --dnc-muted: #6b7280;
    --dnc-input: #edf3fb;
    --dnc-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    --dnc-accent: linear-gradient(135deg, #fbbf24, #f59e0b);
}
html, body { margin: 0; min-height: 100%; background: var(--dnc-background); color: var(--dnc-text); font-family: 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif; }
.dnc-shell { min-height: 100vh; }
.dnc-shell *, .dnc-shell *::before, .dnc-shell *::after { box-sizing: border-box; }
.dnc-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1100; display: flex; flex-direction: column; width: 260px; color: #9ca3af; background: var(--dnc-sidebar); border-right: 1px solid #1f2937; }
.dnc-brand { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #1f2937; color: #fff; text-decoration: none; font-size: 1.3rem; font-weight: 700; }
.dnc-logo { display: block; flex: none; width: 36px; height: 36px; object-fit: contain; }
.dnc-navigation { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 24px; scrollbar-width: thin; scrollbar-color: #334155 #111827; }
/* Keep the original module navigation; only customize its presentation. */
.dnc-sidebar { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.dnc-sidebar .mud-nav-link,
.dnc-sidebar .mud-nav-link .mud-nav-link-text { font-family: inherit; font-size: .92rem; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-transform: none; }
.dnc-sidebar .mud-nav-link .mud-nav-link-text { color: inherit; }
.dnc-sidebar .mud-nav-group > .mud-nav-link,
.dnc-sidebar .mud-nav-group > .mud-nav-link > .mud-nav-link-text { color: #94a3b8; font-size: .72rem; font-weight: 400; letter-spacing: .08em; }
.dnc-sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text { color: #111827; font-weight: 600; }
.dnc-sidebar .mud-nav-link { min-height: 46px; padding: 12px 16px; margin: 6px 0; border: 0; border-radius: 8px; background: transparent; color: #9ca3af; text-decoration: none; font-size: .92rem; line-height: 1.5; font-weight: 500; transition: background-color .2s, color .2s; }
.dnc-sidebar .mud-nav-link .mud-nav-link-icon { width: 24px; font-size: 20px; color: inherit; }
.dnc-sidebar .mud-nav-link .mud-nav-link-expand-icon { color: inherit; }
.dnc-sidebar .mud-nav-link:hover:not(:disabled) { background: #1f2937; color: #fff; }
.dnc-sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) { background: var(--dnc-accent); color: #111827; font-weight: 600; }
.dnc-sidebar .mud-navgroup { margin-top: 18px; padding-top: 12px; border-top: 1px solid #334155; }
.dnc-sidebar .mud-navgroup > .mud-nav-link { color: #94a3b8; font-size: .85rem; }
.dnc-sidebar .mud-navgroup .mud-nav-menu { padding: 0; }
.dnc-sidebar .mud-navgroup .mud-nav-menu .mud-nav-link { padding-left: 48px; }
.dnc-sidebar .mud-nav-menu > .mud-nav-item:last-child { margin-top: 18px; padding-top: 12px; border-top: 1px solid #334155; }
.dnc-sidebar .mud-navgroup .mud-nav-menu > .mud-nav-item:last-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dnc-main { margin-left: 260px; min-width: 0; }
.dnc-topbar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--dnc-border); box-shadow: 0 1px 3px #0000000a; }
.dnc-topbar-title { font-size: 1.05rem; font-weight: 600; color: #111827; }
.dnc-home-link { margin-left: auto; color: var(--dnc-muted); font-size: .86rem; text-decoration: none; }
.dnc-home-link:hover { color: var(--dnc-primary); }
.dnc-operator { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.dnc-operator button, .dnc-login-actions button { border: 1px solid #cbd5e1; border-radius: 6px; background: white; padding: 6px 12px; cursor: pointer; }
.dnc-login-backdrop { position: fixed; inset: 0; z-index: 1400; background: #0f172a66; display: grid; place-items: center; padding: 16px; }
.dnc-login-dialog { width: min(420px, 100%); background: white; border-radius: 12px; padding: 24px; box-shadow: 0 12px 40px #0003; }
.dnc-login-dialog h2 { margin: 0 0 12px; }
.dnc-login-dialog p { font-size: .875rem; margin: 12px 0; }
.dnc-login-dialog label { display: grid; gap: 6px; margin: 16px 0; }
.dnc-login-dialog input { width: 100%; border: 1px solid #cbd5e1; padding: 10px; border-radius: 6px; }
.dnc-login-actions { display: flex; justify-content: flex-end; gap: 12px; }
.dnc-login-actions button[type=submit] { color: white; background: #1f3b93; }
.dnc-login-error { color: #b91c1c; }
@media (max-width: 600px) { .dnc-topbar-title { display: none; } .dnc-operator { flex-wrap: wrap; } }
.dnc-content { min-width: 0; padding: 24px 28px 48px; color: var(--dnc-text); }
.dnc-shell .dnc-menu-toggle { display: none; align-items: center; justify-content: center; padding: 7px; border: 1px solid var(--dnc-border); border-radius: 8px; background: #fff; color: var(--dnc-text); }
.dnc-shell .dnc-menu-toggle:hover { background: #f3f4f6; }
.dnc-backdrop { display: none; }
.dnc-content h1 { margin: 0 0 8px; color: #111827; font-size: 1.8rem; font-weight: 800; line-height: 1.3; }
.dnc-content h2 { font-weight: 700; }
.dnc-content > p, .dnc-page-header p { margin: 6px 0 20px; color: var(--dnc-muted); line-height: 1.7; }
.dnc-page-header { margin-bottom: 24px; }
.dnc-eyebrow, .dnc-content .eyebrow { display: block; margin-bottom: 6px; color: #2563eb; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.dnc-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dnc-module-card { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border: 1px solid var(--dnc-border); border-radius: 12px; background: #fff; color: var(--dnc-text); box-shadow: var(--dnc-shadow); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.dnc-module-card:hover { border-color: #a5b4d8; box-shadow: 0 10px 26px #0f172a14; }
.dnc-module-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 10px; background: var(--dnc-input); color: var(--dnc-primary); }
.dnc-module-card h2 { margin: 0 0 10px; font-size: 1.2rem; }
.dnc-module-card p { flex: 1; margin: 0 0 24px; color: var(--dnc-muted); line-height: 1.7; }
.dnc-module-link { color: var(--dnc-primary); font-size: .9rem; font-weight: 700; }
/* Prefixes intentionally outrank Blazor's isolated module selectors. */
.dnc-shell .dnc-content :is(.card, .panel, .confirm, .summary > div, .metric, .tree-panel, .workshop-panel, .device-panel, .position-panel, .readiness-panel) { border-color: var(--dnc-border); border-radius: 12px; background: #fff; box-shadow: var(--dnc-shadow); }
.dnc-shell .dnc-content :is(.tree-page, .overview-page) { min-height: 0; padding: 0; background: transparent; color: var(--dnc-text); font-family: inherit; }
.dnc-shell .dnc-content :is(.primary, .add-form button, .form-row button) { border-color: var(--dnc-primary); border-radius: 8px; background: var(--dnc-primary); color: #fff; font-weight: 700; box-shadow: 0 6px 14px #1f3b932e; }
.dnc-shell .dnc-content :is(.primary, .add-form button, .form-row button):hover:not(:disabled) { background: var(--dnc-primary-hover); }
.dnc-shell .dnc-content :is(.secondary, .quiet-button, .picker-secondary) { border: 1px solid #d1d5db; background: #fff; color: var(--dnc-text); box-shadow: none; }
.dnc-shell .dnc-content :is(.secondary, .quiet-button, .picker-secondary):hover:not(:disabled) { background: #f3f4f6; }
.dnc-shell .dnc-content :is(.form-grid, .filter-grid, .form-row, .add-form, .move-control, .confirm, .dimension-controls) :is(input:not([type=checkbox]):not([type=range]):not([type=file]), select),
.dnc-shell .dnc-content input.search { border: 1px solid var(--dnc-border); border-radius: 7px; background: var(--dnc-input); color: #111827; }
.dnc-shell .dnc-content :is(input, select):focus-visible { outline: 2px solid #93b4f5; outline-offset: 2px; border-color: var(--dnc-primary); }
.dnc-content :is(input[type=checkbox], input[type=range]) { accent-color: var(--dnc-primary); }
.dnc-shell .dnc-content :is(input, select):disabled { background: #f3f4f6; color: #6b7280; cursor: not-allowed; }
.dnc-shell .dnc-content th { background: #f8fafc; color: #64748b; border-color: var(--dnc-border); }
.dnc-content td { border-color: var(--dnc-border); }
.dnc-content .catalog-tabs { gap: 14px; margin-bottom: 18px; border: 0; }
.dnc-content .catalog-tab { min-width: 150px; padding: 11px 18px; border: 0; border-radius: 8px; background: var(--dnc-primary); color: #fff; font-weight: 700; box-shadow: 0 4px 10px #1f3b9329; }
.dnc-content .catalog-tab:hover:not(:disabled) { background: var(--dnc-primary-hover); }
.dnc-content .catalog-tab.selected, .dnc-content .catalog-tab.selected:hover { background: #ffc107; color: #111827; box-shadow: none; }
.dnc-content .catalog-page-buttons button.current, .dnc-content .picker-chip.active { background: var(--dnc-primary); border-color: var(--dnc-primary); }
.dnc-content .model-choice.selected { border-color: var(--dnc-primary); background: var(--dnc-input); box-shadow: none; }
.dnc-shell .dnc-content :is(.tree-node, .workshop-option, .device-option).selected { border-color: var(--dnc-primary); background: var(--dnc-input); box-shadow: none; }
/* Module dialogs must sit above the fixed sidebar and sticky header. */
.dnc-shell .dnc-content .overlay { z-index: 1400; }
.dnc-shell :focus-visible { outline: 3px solid #93b4f5; outline-offset: 3px; }
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0; z-index: 2000; padding: 14px 44px 14px 20px; background: #fff5df; color: #775b27; box-shadow: 0 -2px 12px #00000014; }
#blazor-error-ui .reload { margin-left: 12px; color: var(--dnc-primary); }
#blazor-error-ui .dismiss { position: absolute; right: 18px; top: 12px; cursor: pointer; }
/* Account for the sidebar when choosing logistics grid breakpoints. */
@media (max-width: 1450px) {
    .dnc-content :is(.tree-columns, .overview-grid) { grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr); }
    .dnc-content :is(.detail-panel, .position-panel) { grid-column: 1 / -1; min-height: 0; }
    .dnc-content .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
    .dnc-module-grid { grid-template-columns: 1fr; }
    .dnc-content :is(.tree-columns, .overview-grid) { grid-template-columns: minmax(0, 1fr); }
    .dnc-content :is(.tree-panel, .workshop-panel, .device-panel, .position-panel) { min-height: 0; }
    .dnc-content .readiness-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .dnc-sidebar { transform: translateX(-100%); transition: transform .2s ease; width: min(260px, 85vw); }
    .dnc-sidebar.is-open { transform: translateX(0); }
    .dnc-shell .dnc-backdrop { display: block; position: fixed; inset: 0; z-index: 1099; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #11182780; }
    .dnc-main { margin-left: 0; }
    .dnc-topbar { padding: 0 16px; }
    .dnc-shell .dnc-menu-toggle { display: inline-flex; }
    .dnc-content { padding: 20px 16px 36px; }
    .dnc-content .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dnc-content :is(.page-heading, .page-head) { align-items: flex-start; flex-direction: column; }
    .dnc-content :is(.toolbar-right, .heading-actions, .panel-actions, .form-actions) { flex-wrap: wrap; }
    .dnc-content .form-row input { min-width: 0; max-width: 100%; }
    .dnc-content .readiness-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .dnc-sidebar, .dnc-sidebar .mud-nav-link, .dnc-module-card { transition: none; }
}