.page {
  padding: var(--space-6) var(--space-4);
  display: grid;
  gap: var(--space-5);
}


.command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.72fr);
  grid-template-areas:
    "map side"
    "field side";
  gap: var(--space-4);
  align-items: start;
  width: 100%;
}

.command-grid__map-panel {
  grid-area: map;
}

.selected-field {
  grid-area: field;
  display: grid;
  gap: var(--space-3);
}

.selected-field__layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.selected-field #selected-field-content p {
  margin: 0 0 10px;
}

.command-grid__side-column {
  grid-area: side;
  display: grid;
  gap: var(--space-4);
  align-content: start;
  height: 100%;
}

.actions-list {
  display: grid;
  gap: var(--space-3);
}

.priority-actions-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 440px;
}

.priority-actions-panel .panel__title {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.priority-actions-panel .actions-list {
  overflow-y: auto;
  padding-right: 4px;
}

.action-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: grid;
  gap: 6px;
}

.action-card[data-severity="high"] { border-left: 4px solid var(--danger); }
.action-card[data-severity="med"] { border-left: 4px solid var(--warning); }
.action-card[data-severity="low"] { border-left: 4px solid var(--primary); }

.action-cta {
  justify-self: start;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
}

.chart-wrap {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.commodity-panel {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.commodity-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.commodity-panel__header .panel__title {
  margin-bottom: 0;
}

.commodity-panel__refresh {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease;
}

.commodity-panel__refresh:hover {
  transform: rotate(25deg);
  border-color: var(--accent);
}

.commodity-panel__status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.commodity-panel__list {
  display: grid;
  gap: 8px;
}

.commodity-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 120px auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--surface), var(--surface-elevated));
  padding: 8px 10px;
  transition: border-color 180ms ease, box-shadow 220ms ease;
}

.commodity-row__name {
  font-size: 0.9rem;
}

.commodity-row__price {
  font-weight: 600;
  font-size: 0.9rem;
}

.commodity-row__sparkline {
  width: 110px;
  height: 28px;
}

.commodity-row__sparkline path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.commodity-row__change {
  font-weight: 600;
  text-align: right;
  font-size: 0.84rem;
}

.commodity-row--up .commodity-row__sparkline path,
.commodity-row--up .commodity-row__change {
  color: var(--primary);
  stroke: var(--primary);
}

.commodity-row--down .commodity-row__sparkline path,
.commodity-row--down .commodity-row__change {
  color: var(--danger);
  stroke: var(--danger);
}

.commodity-row--flat .commodity-row__sparkline path,
.commodity-row--flat .commodity-row__change {
  color: var(--muted);
  stroke: var(--muted);
}

.commodity-row--updated {
  animation: pricePulse 620ms ease;
}

.commodity-row--skeleton {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.skeleton-line {
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(111, 130, 160, 0.18) 15%, rgba(111, 130, 160, 0.32) 40%, rgba(111, 130, 160, 0.18) 55%);
  background-size: 210% 100%;
  animation: skeletonShimmer 1.2s linear infinite;
}

.skeleton-line--spark {
  height: 24px;
}

@keyframes skeletonShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes pricePulse {
  0% { box-shadow: 0 0 0 0 rgba(45, 140, 255, 0.35); }
  100% { box-shadow: 0 0 0 10px rgba(45, 140, 255, 0); }
}

@media (max-width: 1220px) {
  .command-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "field"
      "map"
      "side";
  }

  .selected-field {
    grid-template-columns: 1fr;
  }

  .selected-field__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .commodity-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .commodity-row__change {
    text-align: left;
  }
}