/* Visual Master phase 1. Presentation only; existing controls and handlers stay in place. */
body.vx-premium-shell .vx-root {
  --vx-visual-rule: var(--vx-color-border-subtle);
  font-variant-numeric: lining-nums;
}

/* Shell: navigation and context use one compact frame; content owns the width. */
body.vx-premium-shell .vx-sidebar-logo { padding-inline: 10px; border-bottom: 1px solid var(--vx-visual-rule); }
body.vx-premium-shell .vx-sidebar-logo img { max-width: 112px; max-height: 29px; }
body.vx-premium-shell .vx-nav { gap: 2px; padding: 7px 6px; }
body.vx-premium-shell .vx-nav-domain,
body.vx-premium-shell .vx-nav-link { gap: 9px; padding-inline: 9px; font-size: 12px; line-height: 17px; }
body.vx-premium-shell:not(.pos-active) .vx-nav-subsections { gap: 1px; padding-left: 11px; border-left: 1px solid var(--vx-visual-rule); margin-left: 17px; }
body.vx-premium-shell .vx-nav-subsections .vx-nav-link { padding-inline: 8px; font-size: 12px; }
body.vx-premium-shell .vx-nav-utility { padding: 6px; }
body.vx-premium-shell .vx-topbar { gap: 10px; padding-inline: var(--vx-visual-page-gutter); }
body.vx-premium-shell .vx-topbar-left,
body.vx-premium-shell .vx-topbar-right { gap: 7px; }
body.vx-premium-shell .vx-topbar .vx-company-trigger { max-width: 260px; min-height: var(--vx-control-compact); padding-inline: 8px; font-size: 12px; }
body.vx-premium-shell .vx-topbar .vx-context-indicator { min-height: 21px; padding-inline: 6px; font-size: 11px; }
body.vx-premium-shell .vx-workspace { width: 100%; max-width: none; padding: 12px var(--vx-visual-page-gutter) 20px; }
body.vx-premium-shell .vx-page-header { gap: 12px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--vx-visual-rule); }
body.vx-premium-shell .vx-breadcrumbs ol { margin-bottom: 3px; }
body.vx-premium-shell .vx-page-title { letter-spacing: -.025em; }
body.vx-premium-shell .vx-page-header-actions { gap: 6px; }
body.vx-premium-shell.pos-active .vx-shell-content > .vx-workspace { padding: 0; }

/* Shared content grammar: one surface for a task, rules inside it. */
body.vx-premium-shell .vx-workspace-content > .view.active-view { width: 100%; max-width: none; }
body.vx-premium-shell .view > .panel-head { gap: 12px; padding: 12px var(--vx-visual-panel-padding); }
body.vx-premium-shell .view > .panel-head p { margin-top: 3px; line-height: 1.4; }
body.vx-premium-shell .panel,
body.vx-premium-shell .cards article,
body.vx-premium-shell .detail { box-shadow: none; }
body.vx-premium-shell .view .dashboard-grid,
body.vx-premium-shell .view .content-grid,
body.vx-premium-shell .dashboard-grid,
body.vx-premium-shell .content-grid { gap: var(--vx-visual-section-gap); padding: 0 var(--vx-visual-panel-padding) var(--vx-visual-panel-padding); }
body.vx-premium-shell .cards,
body.vx-premium-shell .metric-grid,
body.vx-premium-shell .module-summary { gap: 8px; padding: 0 var(--vx-visual-panel-padding) 12px; }
body.vx-premium-shell .cards article,
body.vx-premium-shell .metric-grid article,
body.vx-premium-shell .module-summary article { min-height: 0; padding: 10px 12px; border-color: var(--vx-visual-rule); border-radius: var(--vx-radius-control); }
body.vx-premium-shell .cards strong,
body.vx-premium-shell .metric-grid strong { margin-top: 3px; font-variant-numeric: tabular-nums; }
body.vx-premium-shell .vx-metric-strip { gap: 16px; padding-block: 10px; }
body.vx-premium-shell .vx-card { padding: var(--vx-visual-panel-padding); border-color: var(--vx-visual-rule); box-shadow: none; }
body.vx-premium-shell .vx-card .vx-card,
body.vx-premium-shell .view .dashboard-grid > section .vx-card { border: 0; border-radius: 0; padding: 8px 0; background: transparent; box-shadow: none; }
body.vx-premium-shell .vx-section-heading { gap: 10px; margin-bottom: 10px; }
body.vx-premium-shell .vx-dashboard-controls { gap: 10px; padding-block: 10px; }
body.vx-premium-shell .vx-dashboard-overview { gap: 12px; padding-block: 14px; }
body.vx-premium-shell .vx-dashboard-attention { gap: 10px; margin-block: 12px; padding: 10px 12px; }
body.vx-premium-shell .vx-dashboard-section { padding-block: 12px; }
body.vx-premium-shell .vx-dashboard-kpis { gap: 8px; }
body.vx-premium-shell .vx-dashboard-kpi { gap: 4px; min-height: 72px; padding: 9px 11px; border-color: var(--vx-visual-rule); }
body.vx-premium-shell .vx-dashboard-secondary-metrics { gap: 10px; padding-block: 8px 12px; }
body.vx-premium-shell .vx-dashboard-evidence { gap: 10px; }
body.vx-premium-shell .vx-dashboard-detail { padding: 11px; }

/* Dense tables and aligned totals retain readable text and a stable scan line. */
body.vx-premium-shell .view .table-wrap,
body.vx-premium-shell .vx-table-scroll { border-color: var(--vx-visual-rule); border-radius: var(--vx-radius-control); }
body.vx-premium-shell .view table th,
body.vx-premium-shell .view table td { padding: 7px 10px; border-color: var(--vx-visual-rule); vertical-align: middle; line-height: 1.35; }
body.vx-premium-shell .view table th { color: var(--vx-color-text-secondary); font-weight: var(--vx-font-semibold); }
body.vx-premium-shell .view table td { font-variant-numeric: tabular-nums; }
body.vx-premium-shell .view table tbody tr:hover { background: var(--vx-color-surface-hover); }
body.vx-premium-shell .vx-table th,
body.vx-premium-shell .vx-table td { padding-inline: 10px; }
body.vx-premium-shell .vx-pagination,
body.vx-premium-shell .pager { padding: 8px 10px; }

/* Forms, details and overlays reuse the same rhythm. */
body.vx-premium-shell .view :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { padding: 6px 9px; }
body.vx-premium-shell .view .form-grid,
body.vx-premium-shell .view .preferences-grid { gap: 10px 12px; }
body.vx-premium-shell .view .form-grid > label,
body.vx-premium-shell .view .preferences-grid > label { gap: 4px; }
body.vx-premium-shell .detail-full,
body.vx-premium-shell .detail-sections { max-width: none; padding: 12px var(--vx-visual-panel-padding); }
body.vx-premium-shell .detail-sections { gap: 10px; }
body.vx-premium-shell .detail-sections > section,
body.vx-premium-shell .entity-related-section,
body.vx-premium-shell .vx-detail-panel { padding: 12px; border-color: var(--vx-visual-rule); }
body.vx-premium-shell .detail dl,
body.vx-premium-shell .detail-full dl { gap: 5px 12px; margin-top: 10px; }
body.vx-premium-shell dialog { width: min(var(--vx-modal-legacy), calc(100vw - 24px)); max-width: var(--vx-modal-legacy); max-height: min(88dvh, var(--vx-modal-legacy-max-height)); }
body.vx-premium-shell dialog > form { gap: 10px; padding: 14px; }
body.vx-premium-shell dialog .panel-head { top: -14px; margin: -14px -14px 0; padding: 10px 14px; }
body.vx-premium-shell dialog .dialog-actions { gap: 7px; padding-block: 10px; }
body.vx-premium-shell :is(#entityDetailDialog, #quotationWorkbenchDialog) { width: min(var(--vx-modal-detail), calc(100vw - 24px)); max-width: var(--vx-modal-detail); }
body.vx-premium-shell .quotation-line { padding: 10px; }

@media (max-width: 900px) {
  body.vx-premium-shell .vx-workspace { padding: 10px 12px 16px; }
  body.vx-premium-shell .vx-nav-domain,
  body.vx-premium-shell .vx-nav-link { min-height: 38px; }
  body.vx-premium-shell .view .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body.vx-premium-shell .vx-workspace { padding: 8px; }
  body.vx-premium-shell .vx-page-header { align-items: flex-start; }
  body.vx-premium-shell .view .form-grid,
  body.vx-premium-shell .view .preferences-grid { grid-template-columns: minmax(0, 1fr); }
  body.vx-premium-shell .view :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 44px; font-size: 16px; }
  body.vx-premium-shell .view .inline-actions button,
  body.vx-premium-shell .view .dialog-actions button { min-height: 44px; }
  body.vx-premium-shell dialog { width: calc(100vw - 12px); max-height: 94dvh; }
  body.vx-premium-shell dialog > form { padding: 12px; }
  body.vx-premium-shell dialog .panel-head { top: -12px; margin: -12px -12px 0; padding: 10px 12px; }
}