/* ============================================================================
   AQUA HOMESPACE - MODAL SYSTEM
   ============================================================================ */

body.app-modal-open {
  overflow: hidden;
}

.app-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(20, 28, 40, 0.45);
  display: grid;
  place-items: center;
  padding: 16px;
}

.app-modal-dialog {
  width: min(1080px, 100%);
  max-height: calc(100vh - 24px);
  background: #ffffff;
  border: 1px solid #d8dde4;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(14, 22, 34, 0.28);
  display: flex;
  flex-direction: column;
}

.app-modal-dialog:focus { outline: none; }

.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e7ebf0;
}

.app-modal-header h2 {
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
}

.app-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #d8dde4;
  background: #ffffff;
  color: #2c3340;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.app-modal-tabs {
  margin: 12px 16px 0;
}

.app-modal-content-wrap {
  overflow: auto;
  padding: 14px 16px 18px;
}

.app-modal-tab-panel {
  min-height: 220px;
}

.app-modal-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-modal-field {
  border: 1px solid #dce2ea;
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px 12px;
}

.app-modal-field-span-2 {
  grid-column: span 2;
}

.app-modal-label {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a7383;
}

.app-modal-value {
  margin: 0;
  color: #222b39;
  font-size: 1.02rem;
  line-height: 1.35;
}

.app-modal-copy-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-modal-copy-line .app-modal-value {
  margin: 0;
}

.app-modal-copy-btn {
  border: 1px solid #cfd7e3;
  background: #ffffff;
  color: #243247;
  border-radius: 8px;
  height: 30px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 0.82rem;
  white-space: nowrap;
}

.app-modal-copy-btn:hover {
  border-color: #9cadc3;
  background: #f5f8fc;
}

.app-modal-empty {
  margin: 8px 4px;
  color: #5e6676;
}

.app-modal-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-modal-edit-label {
  display: block;
  font-size: 0.88rem;
  color: #5f6878;
}

.app-modal-edit-label input,
.app-modal-edit-label select {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  border: 1px solid #d7dde7;
  border-radius: var(--radius-md);
  padding: 0 10px;
  background: #ffffff;
  color: #222c3a;
}

.app-modal-edit-label textarea {
  width: 100%;
  margin-top: 6px;
  border: 1px solid #d7dde7;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: #ffffff;
  color: #222c3a;
  font-family: inherit;
  resize: vertical;
}

.app-modal-copy-line-edit {
  margin-top: 6px;
}

.app-modal-copy-line-edit input {
  margin-top: 0;
}

.app-modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.app-modal-save-btn {
  border: 1px solid #84be4b;
  border-radius: var(--radius-md);
  min-width: 112px;
  height: 36px;
  padding: 0 42px;
  color: var(--text-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  text-transform: uppercase;
}

.app-modal-save-btn:hover {
  background: var(--accent-dark);
  border-color: #058f63;
  box-shadow: var(--drop-shadow);
  transform: translateY(-1px);
}

.app-modal-cancel-btn {
  border: 1px solid var(--line-soft, #e7e7ea);
  border-radius: var(--radius-md);
  min-width: 80px;
  height: 36px;
  padding: 0 20px;
  background: #fff;
  color: var(--text-body, #3f4a5c);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-transform: uppercase;
}

.app-modal-cancel-btn:hover {
  background: var(--bg-faint, #f6f8fb);
  border-color: #c0c8d4;
}

.app-modal-dialog--sm {
  max-width: 480px;
}

.app-modal-edit-label input.cim-field-error,
.app-modal-edit-label select.cim-field-error {
  border-color: #d94040;
  outline: none;
}

/* Submit button grayed while form has unresolved validation errors.
   Still clickable — click re-runs validation and re-shows the warning. */
.app-modal-save-btn.btn-has-errors,
.app-modal-save-btn.btn-has-errors.btn-accent {
  background-color: #9ca3af;
  border-color: #9ca3af;
  cursor: pointer;
}
.app-modal-save-btn.btn-has-errors:hover,
.app-modal-save-btn.btn-has-errors.btn-accent:hover {
  background-color: #9ca3af;
  border-color: #9ca3af;
  box-shadow: none;
  transform: none;
}

@media (max-width: 860px) {
  .app-modal-shell {
    padding: 10px;
  }

  .app-modal-dialog {
    width: 100%;
    max-height: calc(100vh - 12px);
  }

  .app-modal-tabs {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

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

  .app-modal-edit-grid {
    grid-template-columns: 1fr;
  }

  .app-modal-field-span-2 {
    grid-column: span 1;
  }
}