/* UTU Engine product-wide contrast and surface system.
 * Applied AFTER legacy styles to prevent old light-only colors leaking into Dark.
 * Color choices are deliberately muted; semantic colors are reserved for status.
 */
:root[data-theme="dark"] {
  --utu-panel:#0d1722;
  --utu-panel-soft:#122334;
  --utu-panel-hover:#1a3044;
  --utu-text:#eef6fc;
  --utu-subtext:#a7b4c6;
  --utu-dim:#8fa5b9;
  --utu-stroke:#223647;
  --utu-stroke-soft:#1e3041;
  --utu-highlight:#43d1dd;
  --utu-glow:rgba(0,192,205,.07);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --utu-panel:rgba(255,255,255,.97);
  --utu-panel-soft:#f3f8fc;
  --utu-panel-hover:#eaf4f9;
  --utu-text:#172d40;
  --utu-subtext:#506b7d;
  --utu-dim:#647e91;
  --utu-stroke:#d4e2eb;
  --utu-stroke-soft:#e3edf4;
  --utu-highlight:#008d9e;
  --utu-glow:rgba(0,157,175,.04);
  color-scheme:light;
}
:root .brand {gap:11px}
:root .brand-mark{width:54px;height:60px;overflow:visible}
:root .brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
:root .brand-copy strong{line-height:1.1}
:root .brand-slogan{
  display:block;
  font-size:12px;
  line-height:1.3;
  font-weight:520;
}
:root .brand-slogan #app-version{
  display:block;
  margin-top:5px;
  color:#91b7c8;
  font-size:10px;
  font-weight:700;
  letter-spacing:.025em;
}
:root[data-theme="light"] .brand-slogan #app-version{color:#597a90}

/* Correct the legacy glass panel styles in all editors and detail views. */
:root[data-theme="dark"] :is(
  #application-editor,#connection-editor,#user-editor,#investigation-editor,
  .application-detail-header,.connection-detail-header,.application-tabs,
  .application-tab-panel,.connection-tab-panel,.subpanel,
  .settings-nav-card,.sensitive-settings-card,
  .tool-row,.tool-card,.tool-modal-dialog,.modal-dialog,
  .topology-settings-card,.topology-builder-card,.topology-node-editor,
  .investigation-workspace-head,.cross-app-summary-card,
  .cross-app-manual-verification,.cross-app-verification-group
){
  background:var(--utu-panel)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
  box-shadow:0 9px 26px rgba(0,0,0,.10)!important;
}
:root[data-theme="dark"] :is(
  .application-tab-panel,.connection-tab-panel,.tool-modal-dialog,
  .topology-settings-card,.settings-content,.sensitive-settings-card,
  .analytics-settings-layout,.user-card,.modal-dialog
) :is(h1,h2,h3,h4,h5,label,strong){
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] :is(
  .application-detail-header,.application-tab-panel,.connection-detail-header,
  .connection-tab-panel,.tool-row,.tool-card,.tool-modal-dialog,
  .topology-settings-card,.settings-content,.sensitive-settings-card,
  .analytics-settings-layout,.modal-dialog,.user-card
) :is(p,.hint,.meta,small,.field-help,.description,.form-hint,.settings-breadcrumb,li){
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] :is(
  #application-editor,#connection-editor,#user-editor,#investigation-editor,
  #app-tools,.settings-content,.tool-modal-dialog,.modal-dialog
) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){
  background:var(--utu-field,#101e2d)!important;
  border:1px solid var(--utu-stroke,#223647)!important;
  color:var(--utu-text)!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] :is(input,textarea)::placeholder{color:#93acbf!important;opacity:1}
:root[data-theme="dark"] :is(input,textarea,select):focus-visible,
:root[data-theme="dark"] :is(button,a,summary):focus-visible {
  outline:2px solid #32cbd8!important;outline-offset:2px;
}
:root[data-theme="dark"] :is(.application-tabs,.connection-tabs,.analytics-tabs){
  background:#172f43!important;border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] :is(.application-tabs,.connection-tabs,.analytics-tabs) button{
  background:transparent!important;color:var(--utu-subtext)!important;border-color:transparent!important;
}
:root[data-theme="dark"] :is(.application-tabs,.connection-tabs,.analytics-tabs) button.active{
  background:#23506a!important;color:#f5fcff!important;
  border:1px solid #2f90a4!important;
}
:root[data-theme="dark"] :is(.tool-row,.connection-card,.user-card,.topology-node-card) .actions{
  justify-content:flex-end;margin-top:auto;
}
:root[data-theme="dark"] .application-detail-header .eyebrow{color:#60d7e1!important}
:root[data-theme="dark"] .application-detail-header h1,
:root[data-theme="dark"] .application-detail-header h2{color:#f2f9ff!important}
:root[data-theme="dark"] .tool-row:hover,.tool-card:hover{background:#1a374b!important}
:root[data-theme="dark"] :is(.tool-modal-dialog,.modal-dialog) :is(.argocd-app,.argocd-resource-list,.tool-modal-error){
  background:var(--utu-panel-soft)!important;color:var(--utu-text)!important;
  border-color:var(--utu-stroke)!important;
}

/* Shared overview and cross-application investigation layout. */
#investigation-detail.panel{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;overflow:visible;
}
#investigation-detail .investigation-detail-header{
  background:var(--utu-panel)!important;border:1px solid var(--utu-stroke)!important;
  box-shadow:none!important;
}
#investigation-detail .investigation-title-block h1{
  color:var(--utu-text)!important;line-height:1.35;
}
#investigation-detail :is(.investigation-meta-item,.investigation-meta-strip,.investigation-origin-line) {
  color:var(--utu-subtext)!important;
}
#investigation-detail .investigation-result{
  display:flex!important;flex-direction:column;gap:14px!important;
  padding:14px 0 0!important;
}
#investigation-detail .rca-conclusion-card{
  background:linear-gradient(120deg,var(--utu-panel),var(--utu-panel-soft))!important;
  border:1px solid var(--utu-stroke)!important;box-shadow:none!important;
  padding:23px 25px!important;
}
#investigation-detail .rca-conclusion-card h2{
  color:var(--utu-text)!important;
  font-size:clamp(15px,1.2vw,19px);
  font-weight:600;line-height:1.65;max-width:1200px;
}
#investigation-detail .rca-conclusion-title .eyebrow{
  color:var(--utu-highlight)!important;
}
#investigation-detail .utu-investigation-columns,
.utu-cross-app-columns{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(290px,1fr);
  gap:14px;
  align-items:start;
  width:100%;min-width:0;
}
#investigation-detail .utu-investigation-main,
#investigation-detail .utu-investigation-aside,
.utu-cross-app-columns .utu-investigation-main,
.utu-cross-app-columns .utu-investigation-aside{
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
#investigation-detail .rca-panel,
.utu-investigation-details,
#investigation-detail .execution-timeline-shell,
#investigation-detail .manual-verification-section,
#investigation-detail .rca-why-shell,
#investigation-detail .rca-evidence-gap,
#investigation-detail .rca-section.rca-response-section,
.utu-cross-app-columns .cross-app-summary-card,
.utu-cross-app-columns .cross-app-manual-verification{
  background:var(--utu-panel)!important;
  border:1px solid var(--utu-stroke)!important;
  border-radius:16px!important;
  box-shadow:none!important;
  color:var(--utu-text)!important;
}
#investigation-detail .rca-section-kicker {
  color:var(--utu-highlight)!important;
  font-size:11px;letter-spacing:.065em;
}
#investigation-detail .rca-section.rca-findings-section,
#investigation-detail .rca-section.rca-response-section{
  padding:17px!important;gap:10px;
}
#investigation-detail .rca-section.rca-findings-section{
  border:1px solid var(--utu-stroke);background:var(--utu-panel);
  border-radius:16px;
}
#investigation-detail .rca-insight-grid{grid-template-columns:1fr;gap:10px}
#investigation-detail .rca-panel{padding:14px!important;background:var(--utu-panel-soft)!important}
#investigation-detail .rca-panel h3,
#investigation-detail .rca-panel .cause-row-head strong {
  color:var(--utu-text)!important;
}
#investigation-detail .rca-panel-body,
#investigation-detail .rca-panel-body :is(li,p),
#investigation-detail .cause-row,
#investigation-detail .cause-row-head,
#investigation-detail .rca-section p {
  color:var(--utu-subtext)!important;
}
#investigation-detail .rca-panel-body{padding-left:5px!important}
#investigation-detail .cause-row+.cause-row{border-color:var(--utu-stroke-soft)!important}
#investigation-detail .confidence{
  background:rgba(0,183,204,.14)!important;color:#86eaf3!important;
}
#investigation-detail .compact-disclosure,
#investigation-detail .compact-disclosure>summary,
#investigation-detail .manual-verification-step,
#investigation-detail .manual-verification-expected,
#investigation-detail .manual-verification-path,
#investigation-detail .why-step,
#investigation-detail .execution-event {
  background:var(--utu-panel-soft)!important;
  color:var(--utu-text)!important;
  border-color:var(--utu-stroke-soft)!important;
}
#investigation-detail .compact-disclosure>summary strong,
#investigation-detail .manual-verification-head h3,
#investigation-detail .why-content :is(h3,p),
#investigation-detail .execution-event :is(h3,p) {
  color:var(--utu-text)!important;
}
#investigation-detail .manual-verification-instruction,
#investigation-detail .manual-verification-expected p,
#investigation-detail .manual-verification-path span,
#investigation-detail .manual-verification-expected strong,
#investigation-detail .manual-verification-evidence,
#investigation-detail .timeline-context-note,
#investigation-detail .execution-event-meta{
  color:var(--utu-subtext)!important;
}
#investigation-detail .manual-verification-section{
  padding:18px!important;
}
#investigation-detail .manual-verification-list{gap:10px}
#investigation-detail .manual-verification-step{border:1px solid var(--utu-stroke-soft)!important}
#investigation-detail .manual-verification-code,
#investigation-detail .manual-verification-code-head{
  background:#0c1b29!important;color:#e6eff8!important;
  border-color:#365269!important;
}
#investigation-detail .manual-verification-code :is(code,pre){
  background:#172e41!important;color:#d8f4f8!important;
}
#investigation-detail .manual-verification-type{
  background:var(--utu-panel)!important;color:var(--utu-highlight)!important;
  border-color:var(--utu-stroke)!important;
}
#investigation-detail .rca-evidence-gap{padding:14px!important;display:flex;align-items:flex-start}
#investigation-detail .rca-evidence-gap :is(strong,li){color:var(--utu-subtext)!important}
#investigation-detail .rca-evidence-gap-copy{border-color:var(--utu-stroke)}
#investigation-detail .rca-why-shell{margin:0}
#investigation-detail .why-timeline{border-color:var(--utu-stroke)!important}
#investigation-detail .execution-timeline-shell.utu-investigation-steps{
  padding:0!important;margin:0!important;
  background:var(--utu-panel)!important;
}
#investigation-detail .execution-timeline-shell>summary{
  background:transparent!important;
}
#investigation-detail .execution-timeline-section{border-color:var(--utu-stroke)!important}
#investigation-detail .execution-event{box-shadow:none!important}
#investigation-detail :is(.evidence-refs>div,.timeline-payload,.timeline-payload pre){
  background:var(--utu-panel-soft)!important;border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
#investigation-detail .investigation-danger-zone {
  background:rgba(159,49,57,.10)!important;border:1px solid rgba(233,110,113,.35)!important;
}
.utu-investigation-details{
  padding:19px 20px;
}
.utu-panel-heading{
  display:flex;gap:10px;align-items:center;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--utu-stroke);
}
.utu-panel-heading h3{margin:0;color:var(--utu-text)!important;font-size:14px}
.utu-panel-dot{width:11px;height:11px;border:2px solid var(--utu-highlight);border-radius:4px}
.utu-investigation-details dl{margin:0;display:grid;gap:10px}
.utu-investigation-details dl>div{
  display:grid;grid-template-columns:minmax(96px,.85fr) minmax(0,1.15fr);
  gap:9px;align-items:baseline;
}
.utu-investigation-details dt{font-size:11px;color:var(--utu-dim);line-height:1.5}
.utu-investigation-details dd{
  font-size:11px;font-weight:640;color:var(--utu-text);
  min-width:0;overflow-wrap:anywhere;margin:0;line-height:1.5;
}
.utu-cross-app-columns .cross-app-summary-card{padding:20px!important}
.utu-cross-app-columns .cross-app-summary-card :is(h3,p,li){color:var(--utu-text)!important}
.utu-cross-app-columns .cross-app-manual-verification{padding:18px!important}
.utu-cross-app-columns .cross-app-verification-group,
.utu-cross-app-columns .manual-verification-step{
  background:var(--utu-panel-soft)!important;border-color:var(--utu-stroke)!important;
}
.utu-cross-app-columns .manual-verification-head h3{color:var(--utu-text)!important}
.utu-cross-app-columns .manual-verification-instruction,
.utu-cross-app-columns .manual-verification-expected p,
.utu-cross-app-columns .cross-app-verification-group-head span:not(.badge){
  color:var(--utu-subtext)!important;
}
.utu-cross-app-columns .manual-verification-expected{background:var(--utu-panel)!important}
.utu-cross-app-columns .manual-verification-code{background:#142a3d!important}
.utu-cross-app-columns .manual-verification-code code{color:var(--utu-text)!important}

/* Analytics: subdued monochrome surfaces with restrained accent colors. */
:root :is(.analytics-kpi,.analytics-chart-card,.analytics-control-card,
.analytics-pricing-form,.analytics-pricing-list-panel,.analytics-pricing-item,
.analytics-settings-layout>.panel){
  background:var(--utu-panel)!important;
  border:1px solid var(--utu-stroke)!important;
  box-shadow:none!important;
  color:var(--utu-text)!important;
}
:root .analytics-kpi{min-height:102px;padding:15px 13px!important}
:root .analytics-kpi span{color:var(--utu-dim)!important;font-size:10px}
:root .analytics-kpi strong{color:var(--utu-text)!important;font-size:20px}
:root .analytics-kpi small{color:var(--utu-subtext)!important}
:root .analytics-chart-card{padding:20px!important}
:root .analytics-chart-head h2{color:var(--utu-text)!important}
:root .analytics-chart-head p{color:var(--utu-subtext)!important}
:root .analytics-control-title,
:root .analytics-control-title-row,
:root .analytics-model-option strong,
:root .analytics-check-list label{color:var(--utu-text)!important}
:root .analytics-model-option small,
:root .analytics-chart-legend span,
:root .analytics-chart-empty span{color:var(--utu-subtext)!important}
:root .analytics-hero .analytics-range-label,
:root .analytics-tabs{
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-subtext)!important;
  box-shadow:none!important;
}
:root .analytics-tabs button.active{
  background:var(--utu-panel-hover)!important;color:var(--utu-text)!important;
}
:root .analytics-controls select,
:root .analytics-controls input[type="datetime-local"]{
  background:var(--utu-panel-soft)!important;color:var(--utu-text)!important;
  border:1px solid var(--utu-stroke)!important;
}
:root .analytics-check-list>label:hover{background:var(--utu-panel-hover)!important}
:root .analytics-chart-note{
  background:var(--utu-panel-soft)!important;color:var(--utu-subtext)!important;
}
:root .analytics-grid-line{stroke:var(--utu-stroke-soft)!important}
:root .analytics-axis-label{fill:var(--utu-dim)!important}
:root .analytics-chart-empty strong{color:var(--utu-text)!important}
:root .analytics-refresh{box-shadow:none!important}
:root[data-theme="dark"] .analytics-point{stroke:var(--utu-panel)!important}
:root[data-theme="dark"] .analytics-pricing-form :is(label,strong,h2,h3),
:root[data-theme="dark"] .analytics-pricing-list-panel :is(label,strong,h2,h3){
  color:var(--utu-text)!important;
}
:root[data-theme="dark"] .analytics-settings-layout :is(input,select){
  background:var(--utu-panel-soft)!important;color:var(--utu-text)!important;
  border-color:var(--utu-stroke)!important;
}

/* How to Use: retain the interactive motion while using the same theme tokens. */
:root #how-to-view :is(.howto-card,.howto-story-active .howto-card,.howto-finish){
  background:linear-gradient(135deg,var(--utu-panel),var(--utu-panel-soft))!important;
  border-color:var(--utu-stroke)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.12)!important;
  color:var(--utu-text)!important;
}
:root #how-to-view :is(.howto-card h2,.howto-finish strong){
  color:var(--utu-text)!important;
}
:root #how-to-view :is(.howto-card p,.howto-finish p){
  color:var(--utu-subtext)!important;
}
:root #how-to-view .howto-kicker{color:var(--utu-highlight)!important}
:root #how-to-view .howto-node{
  background:var(--utu-panel-hover)!important;color:var(--utu-highlight)!important;
  border-color:var(--utu-highlight)!important;
}
:root #how-to-view .howto-card button,
:root #how-to-view .howto-back-top{
  background:var(--utu-panel-soft)!important;
  border:1px solid var(--utu-stroke)!important;
  color:var(--utu-highlight)!important;
}
:root #how-to-view .howto-spine{
  background:linear-gradient(to bottom,transparent,var(--utu-highlight),transparent)!important;
}
:root #how-to-view .howto-hero-badge{
  background:var(--utu-panel-soft)!important;
  border-color:var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
:root #how-to-view .howto-icon{background:var(--utu-panel-hover)!important;color:var(--utu-highlight)!important}
:root #how-to-view .howto-finish span{color:var(--utu-highlight)!important}

/* Consistent dark inputs and captions on remaining tool, connection, settings,
   overview, dependency, topology, users and modal screens. */
:root[data-theme="dark"] :is(
  .application-detail,.connection-detail,.tool-row,.tool-modal-dialog,
  .modal-dialog,.settings-content,.settings-nav-card,.user-card,
  #application-editor,#connection-editor,#user-editor,
  #app-tools,.topology-settings-card,.topology-builder-card
) :is(
  .grid,.form-grid,.subpanel,.config-panel,.tool-card,
  .settings-field,.field,fieldset,.code-block,.editor-section
){
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="dark"] :is(.application-detail,.connection-detail,.tool-modal-dialog,
.modal-dialog,.settings-content,.topology-builder-card,.topology-settings-card)
:is(.hint,.field-help,.form-description,.helper-text,.settings-breadcrumb){
  color:var(--utu-subtext)!important;
}
:root[data-theme="dark"] :is(.settings-content,.application-detail,.connection-detail,.modal-dialog)
:is(pre,code){
  background:#192e42;color:#e2f2f7;border-color:var(--utu-stroke);
}
:root[data-theme="dark"] :is(.settings-content,.application-detail,.connection-detail,.modal-dialog)
:is(.badge,.pill):not(.ok):not(.warn):not(.error-badge) {
  background:#224057;color:var(--utu-text);border-color:var(--utu-stroke);
}
/* The top-level cards in LIGHT remain clean white, not old pale gray fills. */
:root[data-theme="light"] :is(
  .application-detail-header,.connection-detail-header,
  .application-tab-panel,.connection-tab-panel,.modal-dialog,
  .tool-modal-dialog,.settings-nav-card,.tool-row,
  .topology-settings-card,.topology-builder-card
){
  background:var(--utu-panel)!important;
  color:var(--utu-text)!important;
  border-color:var(--utu-stroke)!important;
}
:root[data-theme="light"] #investigation-detail .confidence{
  background:#e5f7fa!important;color:#036e7e!important;
}
:root[data-theme="light"] #investigation-detail .manual-verification-code :is(code,pre){
  color:#e9f8fa!important;
}
@media(max-width:1100px){
  #investigation-detail .utu-investigation-columns,.utu-cross-app-columns {
    grid-template-columns:minmax(0,1fr) minmax(250px,.72fr);
  }
}
@media(max-width:820px){
  #investigation-detail .utu-investigation-columns,.utu-cross-app-columns{
    grid-template-columns:minmax(0,1fr);
  }
  #investigation-detail .utu-investigation-aside,
  .utu-cross-app-columns .utu-investigation-aside{order:2}
}
@media(max-width:640px){
  :root .brand-mark{height:49px;width:46px}
  :root .brand-slogan{font-size:10px}
  #investigation-detail .rca-conclusion-card{padding:17px!important}
  .utu-investigation-details{padding:14px}
}