/* Feature composition layer.
   This file composes Base Components only; shared visual contracts belong in base-components.css. */

.jx-brand-lockup { display: flex; align-items: center; gap: var(--jx-space-6); }
.jx-brand-lockup--center { flex-direction: column; justify-content: center; text-align: center; margin-bottom: var(--jx-space-10); }
.jx-brand-logo { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.jx-brand-logo--login { width: min(310px, 82%); height: auto; max-height: 104px; }
.jx-brand-product-copy { display: grid; justify-items: center; }
.jx-brand-logo--sidebar { width: 158px; max-width: 100%; height: 46px; object-position: left center; }
.jx-brand-logo--sidebar-compact { display: none; width: 38px; height: 38px; object-fit: contain; }

.jx-sidebar { height: 100dvh; min-height: 0; display: flex; flex-direction: column; padding: 0; background: color-mix(in srgb, var(--jx-color-surface-panel) 92%, transparent); border-right: 1px solid var(--jx-color-border-soft); box-shadow: var(--jx-shell-header-shadow); backdrop-filter: blur(18px); z-index: var(--jx-router-layer-sidebar); overflow: hidden; }
.jx-sidebar-brand { flex: 0 0 var(--jx-router-shell-header-height); margin: 0 0 var(--jx-space-8); }
.jx-nav-list { display: grid; gap: var(--jx-space-2); padding: 0 var(--jx-space-8); }
.jx-nav-count { min-width: 24px; height: 24px; padding: 0 7px; }
.jx-sidebar-footer { margin-top: auto; display: grid; gap: var(--jx-space-6); padding: 0 var(--jx-space-8) var(--jx-space-8); }
.jx-mini-status { display: flex; align-items: center; gap: var(--jx-space-4); color: var(--jx-color-text-tertiary); font-size: var(--jx-font-size-sm); }
.jx-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jx-color-text-tertiary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jx-color-text-tertiary) 12%, transparent); }
.jx-status-dot.ok { background: var(--jx-color-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jx-color-success) 14%, transparent); }
.jx-status-dot.error { background: var(--jx-color-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jx-color-danger) 14%, transparent); }

.jx-topbar { flex: 0 0 var(--jx-router-shell-header-height); }
.jx-topbar-actions, .jx-button-row { display: flex; align-items: center; gap: var(--jx-space-4); flex-wrap: wrap; }
.jx-hero-panel { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: var(--jx-space-10); padding: var(--jx-space-10); position: relative; overflow: hidden; }
.jx-hero-panel::after { content: ""; position: absolute; inset: auto -80px -120px auto; width: 340px; height: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--jx-color-accent) 12%, transparent), transparent 70%); pointer-events: none; }
.jx-hero-panel h3 { font-size: 22px; margin: 0; }
.jx-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jx-space-6); margin-bottom: var(--jx-space-8); }
.jx-content-grid { display: grid; gap: var(--jx-space-8); margin-bottom: var(--jx-space-8); }
.jx-content-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jx-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jx-space-5); }

.jx-search-box { min-width: 280px; flex: 1; display: flex; align-items: center; gap: var(--jx-space-4); padding: 0 var(--jx-space-5); min-height: var(--jx-control-height-md); border: 1px solid var(--jx-component-field-border-color); border-radius: var(--jx-radius-md); background: var(--jx-component-field-background); }
.jx-search-box .jx-base-control { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.jx-segmented { display: flex; align-items: center; gap: var(--jx-space-2); padding: 3px; border: 1px solid var(--jx-color-border-soft); border-radius: var(--jx-radius-md); background: color-mix(in srgb, var(--jx-color-surface-2) 72%, transparent); }
.jx-segmented .jx-base-button { min-width: 74px; border-color: transparent; }
.jx-segmented .jx-base-button.active { color: var(--jx-color-accent-hover); border-color: var(--jx-component-segment-selected-border-color); background: var(--jx-component-segment-selected-background); box-shadow: var(--jx-component-segment-selected-shadow); }

.jx-log-toolbar { flex: 0 0 auto; }
.jx-log-file-field { flex: 1; min-width: 260px; }
.jx-activity-list { display: grid; }
.jx-activity-row { min-height: 48px; display: grid; grid-template-columns: 190px minmax(160px, .8fr) minmax(120px, 1fr) auto; gap: var(--jx-space-6); align-items: center; border-bottom: 1px solid var(--jx-color-border-soft); }
.jx-activity-row:last-child { border-bottom: 0; }
.jx-activity-time { color: var(--jx-color-text-tertiary); }
.jx-activity-action { color: var(--jx-color-accent-hover); }
.jx-warning-panel { border-color: color-mix(in srgb, var(--jx-color-warning) 48%, var(--jx-color-border-standard)); }

.jx-preset-help { min-height: 42px; padding: var(--jx-space-5); border: 1px solid var(--jx-color-border-soft); border-radius: var(--jx-radius-md); color: var(--jx-color-text-tertiary); background: color-mix(in srgb, var(--jx-color-surface-2) 55%, transparent); }
.jx-upstream-list { display: grid; gap: var(--jx-space-6); }
.jx-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jx-space-5); }
.jx-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--jx-space-5); padding: var(--jx-space-5) 0; }
.jx-raw-modal-body { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.jx-confirm-message { line-height: var(--jx-line-height-relaxed); }
.jx-confirm-options { display: grid; gap: var(--jx-space-5); margin-top: var(--jx-space-6); }
.jx-history-list { display: grid; }

@media (max-width: 1180px) {
  .jx-app-shell { grid-template-columns: 88px minmax(0, 1fr); }
  .jx-brand-logo--sidebar, .jx-base-nav-label, .jx-nav-count, .jx-mini-status > :last-child { display: none; }
  .jx-brand-logo--sidebar-compact { display: block; }
  .jx-base-nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .jx-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-upstream-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-upstream-row > .jx-base-icon-button { grid-column: 2; justify-self: end; }
}

@media (max-width: 760px) {
  .jx-app-shell { display: block; }
  .jx-sidebar { position: fixed; inset: auto 0 0; width: 100%; height: auto; padding: var(--jx-space-3); border-right: 0; border-top: 1px solid var(--jx-color-border-soft); }
  .jx-sidebar-brand, .jx-sidebar-footer { display: none; }
  .jx-nav-list { grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0; }
  .jx-base-nav-item { min-height: 58px; font-size: 10px; }
  .jx-base-nav-label { display: block; }
  .jx-base-nav-icon { font-size: 16px; }
  .jx-workspace { height: 100dvh; padding-bottom: 68px; }
  .jx-topbar { padding: var(--jx-space-5); align-items: flex-start; }
  .jx-topbar-actions #applyButton { display: none; }
  .jx-page { width: calc(100% - 24px); padding: var(--jx-space-6) 0; }
  .jx-page--logs.active, .jx-page--grid.active { padding-bottom: var(--jx-space-6); }
  .jx-hero-panel { align-items: flex-start; flex-direction: column; }
  .jx-metric-grid, .jx-content-grid--2, .jx-capability-grid { grid-template-columns: 1fr; }
  .jx-base-toolbar { align-items: stretch; flex-direction: column; }
  .jx-base-toolbar--control-aligned { align-items: stretch; }
  .jx-base-action-row { width: 100%; justify-content: flex-start; }
  .jx-search-box { min-width: 0; }
  .jx-toggle-grid { grid-template-columns: 1fr; }
  .jx-activity-row { grid-template-columns: 1fr; gap: var(--jx-space-2); padding: var(--jx-space-5) 0; }
  .jx-upstream-row { grid-template-columns: 1fr; }
  .jx-upstream-row > .jx-base-icon-button { grid-column: 1; }
}