/* Presentation layer: preserve cargo geometry, operational states and print output. */
@media screen {
  :root {
    --bg: #f3f5f7;
    --card: #fff;
    --text: #243348;
    --muted: #5e6d80;
    --line: #dce2e9;
    --accent: #2463a8;
    --brand-primary: #243348;
    --brand-secondary: #2463a8;
    --dl-text-main: #243348;
    --dl-text-muted: #5e6d80;
    --dl-surface-page: #f3f5f7;
    --dl-border: #dce2e9;
    --dl-surface-soft: #f6f8fa;
    --dl-blue-soft: #edf4fc;
    --dl-radius-input: 7px;
    --dl-radius-card: 9px;
    --dl-radius-panel: 12px;
  }
  body { background: var(--bg); color: var(--text); }
  #cargoAreasToolbarHost { padding: 0 16px 20px; }
  body button { font-weight: 600; box-shadow: none; }
  body button:hover { transform: none; }
  body button:focus-visible, body summary:focus-visible {
    outline: 3px solid #679bd2;
    outline-offset: 3px;
  }
  .ui-icon {
    display: inline-block; width: 16px; height: 16px;
    flex: 0 0 16px; vertical-align: -3px; margin-right: 5px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
  }
  .top-project-bar.pro-topbar {
    background: #fff !important;
    border-bottom: 1px solid #cbd6e3 !important;
    box-shadow: none !important;
  }
  .top-project-bar.pro-topbar .project-top-row::before {
    background: transparent; border: 0; color: #243348;
    font-size: 17px; font-weight: 750; padding-left: 0;
  }
  .top-project-bar.pro-topbar .project-title-field input {
    background: #f6f8fa !important; border-color: var(--line) !important;
    border-radius: 7px !important; box-shadow: none !important;
    font-weight: 500 !important;
  }
  .top-project-bar.pro-topbar .office-menu-trigger,
  .top-project-bar.pro-topbar .office-right-actions .office-top-action {
    background: transparent !important; color: #34465c !important;
    border-color: transparent !important; border-radius: 7px !important;
    font-weight: 600 !important;
  }
  .top-project-bar.pro-topbar .office-menu-trigger:hover,
  .top-project-bar.pro-topbar .office-menu.is-open .office-menu-trigger,
  .top-project-bar.pro-topbar .office-right-actions .office-top-action:hover {
    background: #d5e1ef !important;
  }
  .top-project-bar.pro-topbar .office-quick-save {
    background: #2463a8 !important; color: #fff !important;
    border-color: #2463a8 !important; border-radius: 7px !important;
    font-weight: 600 !important;
  }
  .top-project-bar.pro-topbar .office-quick-save:hover { background: #194f8c !important; }
  .top-project-bar.pro-topbar .office-right-actions { border-left-color: #cbd6e3; }
  .top-project-bar.pro-topbar .office-menu-panel {
    border: 1px solid var(--line); border-radius: 9px;
    box-shadow: 0 8px 24px #24334818;
  }
  .top-project-bar.pro-topbar .office-menu-item { font-weight: 500 !important; }
  .pro-insert-bar { background: var(--bg); box-shadow: none; border-bottom: 0; }
  .app.pro-layout-app { row-gap: 8px; }
  .pro-insert-bar { top: calc(var(--pro-topbar-h) + 8px); }
  .pro-insert-bar::before {
    content: ''; position: absolute; left: 0; right: 0; top: -8px;
    height: 8px; background: var(--bg); pointer-events: none;
  }
  body.is-insert-collapsed .pro-insert-bar::before { display: none; }
  .pro-insert-bar .pro-unified-insert {
    background: #fff !important; border: 1px solid var(--line) !important;
    border-radius: 10px !important; box-shadow: none !important;
  }
  .pro-unified-insert .pro-insert-group {
    background: #fff !important; border-color: transparent !important;
    border-right-color: var(--line) !important; border-radius: 0 !important;
    box-shadow: none !important;
  }
  .pro-unified-insert #proInsertMainActionsGroup { border-right: 0 !important; }
  #proInsertColorGroup .color-palette-label {
    display: block; color: #526176; font-size: 11.5px;
    font-weight: 500; margin-bottom: 3px; text-align: left;
    width: 100%;
  }
  #proInsertColorGroup .swatch-palette {
    grid-row: 2;
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; border-radius: 0;
    justify-content: center; padding: 4px 0;
  }
  #proInsertColorGroup .color-palette-label { grid-row: 1; grid-column: 1 / -1; }
  #proInsertColorGroup .display-toggle {
    border: 0 !important; background: transparent !important;
    border-radius: 0; box-shadow: none !important;
  }
  #proInsertIdentityGroup label[data-pro-group="target"] { grid-column: 1 / -1 !important; }
  .pro-unified-insert label { color: #526176; font-size: 11.5px; font-weight: 500; }
  .pro-unified-insert input, .pro-unified-insert select {
    background: #fff !important; border-color: #ccd5df !important;
    border-radius: 6px !important; box-shadow: none;
  }
  body .primary, body .success, #proInsertMainActionsGroup #unifiedAddBtn {
    background: #2463a8; color: #fff; box-shadow: none !important;
    font-weight: 600;
  }
  body .primary:hover, body .success:hover { background: #194f8c; }
  #proInsertMainActionsGroup #unifiedBulkBtn {
    background: #f6f8fa; color: #34465c; font-weight: 500;
  }
  #proInsertMainActionsGroup #unifiedBulkBtn:hover { background: #edf2f7; }
  .panel.pro-sidebar {
    background: #fff !important; border: 1px solid var(--line) !important;
    box-shadow: none !important;
  }
  .pro-sidebar .pro-sidebar-tools {
    border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0 !important; padding: 0 0 12px; gap: 4px;
  }
  .pro-sidebar .pro-sidebar-tools::after { display: none; }
  .pro-sidebar .pro-sidebar-tools button { font-weight: 500; padding: 5px; }
  .pro-sidebar .pro-sidebar-tools .ui-icon { width: 14px; height: 14px; flex-basis: 14px; margin-right: 3px; }
  .pro-sidebar #legendSection h2 { font-size: 17px; font-weight: 650; margin-bottom: 14px; }
  .cargo-manager-card, .cargo-manager-subgroup, .cargo-manager-item { box-shadow: none !important; }
  .cargo-manager-meta, .cargo-manager-sequence-sub { color: #5e6d80; }
  .main-card.pro-workspace, .pro-workspace #schemaPage {
    background: transparent !important; box-shadow: none !important;
  }
  .pro-workspace #schemaPage { padding: 0; }
  #cargoAreasContainer > .cargo-sheet:not(.staging-sheet) {
    background: #fff !important; border-color: var(--line) !important;
    box-shadow: none !important;
  }
  .cargo-sheet-title { font-weight: 650; letter-spacing: -.02em; }
  .cargo-sheet-actions .area-action-btn { box-shadow: none; font-weight: 500; }
  .area-analysis-card, .cargo-manager-sequence, .area-status-card {
    box-shadow: none !important;
  }
  .app-footer { color: #667587; font-size: 10px; line-height: 1.5; }
  @media (max-width: 1100px) {
    .top-project-bar.pro-topbar .project-top-row { flex-wrap: wrap !important; height: auto !important; }
    .top-project-bar.pro-topbar { height: auto !important; }
    .top-project-bar.pro-topbar .project-actions.office-actions { flex-wrap: wrap !important; }
    .top-project-bar.pro-topbar .office-right-actions { flex-wrap: wrap; }
  }
  @media (max-width: 760px) {
    .panel.pro-sidebar { position: static; max-height: none; }
    .top-project-bar.pro-topbar .project-title-field { min-width: 0 !important; }
    .top-project-bar.pro-topbar .office-right-actions { width: 100%; padding-left: 0; border-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    button, input, select, textarea { transition: none !important; }
  }
}

/* Keep every insertion control exposed, with aligned rows and natural height. */
@media screen {
  body:not(.is-insert-collapsed) #proInsertBarHost {
    height: auto; min-height: 0; padding-bottom: 0;
  }
  #proInsertBarHost .pro-unified-insert {
    height: auto; min-height: 0; padding: 8px 8px;
    grid-template-columns: minmax(195px, 1.05fr) minmax(420px, 2fr) minmax(145px, .7fr) minmax(275px, 1.25fr) minmax(290px, 1.3fr);
    gap: 0; overflow: visible;
  }
  #proInsertBarHost .pro-insert-group {
    grid-column: auto; height: auto; padding: 3px 12px;
    overflow: visible; border-right-color: #e5e9ef !important;
  }
  #proInsertBarHost .pro-insert-group-body {
    grid-template-rows: 44px 44px; gap: 6px; align-content: start;
    align-items: end; overflow: visible;
  }
  #proInsertBarHost label[data-pro-field] { white-space: normal; overflow: visible; line-height: 14px; font-size: 11px; }
  #proInsertBarHost input:not([type="checkbox"]):not([type="color"]),
  #proInsertBarHost select:not(#unifiedColor) { height: 28px; min-height: 28px; font-size: 11.5px; }
  #proInsertDimensionsGroup .pro-insert-group-body {
    grid-template-columns: minmax(86px, 1fr) minmax(86px, 1fr) minmax(80px, 1fr) minmax(140px, 1.55fr);
  }
  #proInsertColorGroup label[data-pro-group="color"] { gap: 11px; }
  #proInsertColorGroup .color-palette-label { margin: 0; line-height: 14px; font-size: 11px; }
  #proInsertColorGroup .swatch-palette { height: 28px; padding: 0; }
  #proInsertColorGroup .display-toggles-wrap { align-self: end; }
  #proInsertColorGroup .display-toggle { height: 28px; padding: 2px; font-size: 11px; }
  #proInsertBarHost #proInsertColorGroup .pro-insert-group-body {
    grid-template-rows: 53px 28px; row-gap: 4px;
  }
  #proInsertBarHost #proInsertMainActionsGroup .pro-insert-group-body {
    grid-template-rows: 28px 28px; row-gap: 6px; align-content: center;
  }
  #proInsertMainActionsGroup button { height: 28px !important; min-height: 28px !important; font-size: 11.5px !important; padding: 2px 6px !important; white-space: normal; }
  @media (max-width: 1450px) {
    #proInsertBarHost .pro-unified-insert { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 12px; }
    #proInsertBarHost #proInsertIdentityGroup { grid-column: span 2; }
    #proInsertBarHost #proInsertDimensionsGroup { grid-column: span 4; border-right: 0 !important; }
    #proInsertBarHost #proInsertWeightGroup,
    #proInsertBarHost #proInsertColorGroup,
    #proInsertBarHost #proInsertMainActionsGroup { grid-column: span 2; }
  }
  @media (max-width: 1000px) {
    body:not(.is-insert-collapsed) #proInsertBarHost { position: relative; top: auto; }
    #proInsertBarHost .pro-unified-insert { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #proInsertBarHost #proInsertIdentityGroup,
    #proInsertBarHost #proInsertDimensionsGroup { grid-column: 1 / -1; }
    #proInsertBarHost #proInsertWeightGroup { grid-column: span 1; }
    #proInsertBarHost #proInsertColorGroup { grid-column: span 1; }
    #proInsertBarHost #proInsertMainActionsGroup { grid-column: 1 / -1; }
    .panel.pro-sidebar { position: static; max-height: none; }
  }
  @media (max-width: 580px) {
    #proInsertBarHost .pro-unified-insert { grid-template-columns: minmax(0, 1fr); }
    #proInsertBarHost .pro-insert-group { grid-column: 1 / -1 !important; border-right: 0 !important; padding: 4px 6px; }
    #proInsertDimensionsGroup .pro-insert-group-body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 44px); }
    #proInsertDimensionsGroup label[data-pro-field="unifiedTemplateSelect"] { grid-column: 1 !important; grid-row: 1; }
    #proInsertDimensionsGroup label[data-pro-field="unifiedQty"] { grid-column: 2 !important; grid-row: 1; }
    #proInsertDimensionsGroup label[data-pro-field="unifiedW"] { grid-column: 1 !important; grid-row: 2; }
    #proInsertDimensionsGroup label[data-pro-field="unifiedH"] { grid-column: 2 !important; grid-row: 2; }
    #proInsertDimensionsGroup label[data-pro-field="unifiedZ"] { grid-column: 1 !important; grid-row: 3; }
    #proInsertDimensionsGroup label[data-pro-group="stack"] { grid-column: 2 !important; grid-row: 3; }
  }
}