/* Phase A Modernization: shared UX + responsive polish */

:root {
  --ux-radius: 0.75rem;
  --ux-radius-lg: 1rem;
  --ux-focus: rgba(var(--color-primary-rgb), 0.28);
}

.ux-card {
  border-radius: var(--ux-radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: 0 16px 34px -24px var(--shadow-medium);
}

.form-control,
.form-select,
.input-group-text,
.btn {
  min-height: 42px;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--ux-focus);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--error-color);
}

.ux-error-inline {
  color: var(--error-color);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* Clearly visible MODERN mode styling */
body.order-entry-modern .form-panel {
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--border-color));
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

body.order-entry-modern #auftragForm {
  display: grid;
  gap: 0.35rem;
}

body.order-entry-modern #auftragForm .form-label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.order-entry-modern #auftragForm .form-control,
body.order-entry-modern #auftragForm .form-select,
body.order-entry-modern #auftragForm .input-group-text,
body.order-entry-modern #auftragForm .btn,
body.order-entry-modern #auftragForm .dropdown > .btn {
  border-radius: 0.7rem;
}

body.order-entry-modern #auftragForm .btn-primary,
body.order-entry-modern #auftragForm .btn-success {
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

@media (max-width: 991.98px) {
  #formMapRow {
    gap: 1rem;
  }

  .form-panel {
    margin-bottom: 0 !important;
    border-radius: var(--ux-radius-lg);
  }

  #auftragForm .btn,
  #auftragForm .form-control,
  #auftragForm .form-select,
  #auftragForm .input-group-text {
    min-height: 46px;
  }

  #auftragForm .dropdown > .btn {
    min-height: 46px;
  }

  body.order-entry-modern .form-panel {
    border-width: 2px;
  }
}

@media (max-width: 767.98px) {
  body:not(.login-page) .container-fluid {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .cockpit-page {
    padding: 1rem 0.35rem 1.5rem !important;
  }

  .cockpit-header {
    gap: 0.8rem;
  }

  .cockpit-header h1 {
    font-size: 1.3rem;
    margin-bottom: 0.35rem !important;
  }

  .cockpit-table thead th {
    white-space: nowrap;
    font-size: 0.66rem;
  }

  body.order-entry-modern .form-panel {
    background: color-mix(in srgb, var(--bg-surface) 92%, var(--color-primary) 8%);
  }
}