/* PPDO MIS UI Phase 1 — opt-in reusable UI primitives.
   Classes are prefixed with mis-ui- so existing module functions/layouts are untouched. */
.mis-ui-card {
  background: var(--mis-color-surface);
  border: 1px solid var(--mis-color-line);
  border-radius: var(--mis-radius-lg);
  box-shadow: var(--mis-shadow-sm);
}
.mis-ui-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mis-space-3);
}
.mis-ui-stack { display: grid; gap: var(--mis-space-4); }
.mis-ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--mis-space-4);
}
.mis-ui-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mis-space-2);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--mis-radius-md);
  font: 700 14px/1 var(--mis-font-sans);
  cursor: pointer;
}
.mis-ui-button--primary { background: var(--mis-color-primary-dark); color: #fff; }
.mis-ui-button--light { background: #fff; color: var(--mis-color-text); border-color: var(--mis-color-line); }
.mis-ui-field { display: grid; gap: 7px; }
.mis-ui-field > label { color: var(--mis-color-muted); font-weight: 700; font-size: 13px; }
.mis-ui-field :is(input,select,textarea) {
  width: 100%;
  border: 1px solid var(--mis-color-line);
  border-radius: var(--mis-radius-md);
  padding: 11px 13px;
  background: #fff;
  color: var(--mis-color-text);
  font: 400 14px/1.4 var(--mis-font-sans);
}
@media (max-width: 640px) {
  .mis-ui-toolbar > * { width: 100%; }
}